-
diff --git a/projects/ui-organization/src/lib/components/search-for-tenant.component.scss b/projects/ui-organization/src/lib/components/search-for-tenant.component.scss
index 41de36d..6e4fef3 100644
--- a/projects/ui-organization/src/lib/components/search-for-tenant.component.scss
+++ b/projects/ui-organization/src/lib/components/search-for-tenant.component.scss
@@ -1,9 +1,87 @@
-@import '~@ucap/ui-scss/ucap';
+@import '~@ucap/ng-ui-material/material';
+
+/// var
+/// --ucap-organization-search-for-tenant-height
+/// --ucap-organization-search-for-tenant-border-width
+/// --ucap-organization-search-for-tenant-border-color
.ucap-organization-search-for-tenant-container {
width: 100%;
height: 100%;
- .ucap-organization-search-for-tenant-inner {
+ flex-direction: row;
+ box-sizing: border-box;
+ display: flex;
+
+ border: {
+ width: var(--ucap-organization-search-for-tenant-border-width, 1px);
+ color: var(--ucap-organization-search-for-tenant-border-color, #e42f66);
+ style: solid;
+ }
+
+ background-color: transparent;
+
+ .company-container {
+ box-sizing: border-box;
+
+ flex: 1 1 20%;
+ max-width: 20%;
+ min-width: 20%;
+
+ @media only screen and (min-width: 1025px) {
+ flex: 1 1 260px;
+ max-width: 260px;
+ min-width: 260px;
+ }
+
+ @media only screen and (max-width: 1024px) {
+ flex: 1 1 150px;
+ max-width: 150px;
+ min-width: 150px;
+ }
+
+ .form-field-select-company {
+ width: 100%;
+ @include ucapMatSelect(
+ var(--ucap-organization-search-for-tenant-height, 38px),
+ 0 12px
+ );
+ }
+ }
+
+ .searchword-container {
+ flex: 1 1 auto;
+ box-sizing: border-box;
+
+ .form-field-input-searchword {
+ @include ucapMatFormField(
+ 0px solid #cccccc,
+ 0,
+ 100%,
+ auto,
+ auto,
+ 100%,
+ 100%
+ );
+ .btn-close {
+ margin-top: 2px;
+ }
+ }
+ }
+
+ .btn-search-container {
+ flex: 0 0 var(--ucap-organization-search-for-tenant-height, 38px);
+ box-sizing: border-box;
+ max-width: var(--ucap-organization-search-for-tenant-height, 38px);
+ min-width: var(--ucap-organization-search-for-tenant-height, 38px);
+
+ .btn-search {
+ @include ucapMatButton(
+ var(--ucap-organization-search-for-tenant-height, 38px),
+ var(--ucap-organization-search-for-tenant-height, 100%),
+ 0,
+ 20px
+ );
+ }
}
}
diff --git a/projects/ui-organization/src/lib/components/search-for-tenant.component.stories.ts b/projects/ui-organization/src/lib/components/search-for-tenant.component.stories.ts
index 5fdace7..0b9a561 100644
--- a/projects/ui-organization/src/lib/components/search-for-tenant.component.stories.ts
+++ b/projects/ui-organization/src/lib/components/search-for-tenant.component.stories.ts
@@ -10,7 +10,7 @@ import { OrganizationUiModule } from '../organization-ui.module';
import { SearchForTenantComponent } from './search-for-tenant.component';
export default {
- title: 'SearchForTenantComponent',
+ title: 'ui-organization::SearchForTenantComponent',
component: SearchForTenantComponent,
decorators: [
moduleMetadata({
@@ -20,9 +20,35 @@ export default {
]
};
-export const Text = () => ({
+export const Default = () => ({
component: SearchForTenantComponent,
props: {
- text: 'Hello SearchForTenantComponent'
+ text: 'Hello SearchForTenantComponent',
+ companyList: [
+ {
+ companyCode: 'CD1',
+ companyName: '회사1',
+ companyDomain: '회사1',
+ companyConfAuthYn: 'Y',
+ ucapUseYn: 'Y',
+ companyTimerChatAuthYn: 'Y'
+ },
+ {
+ companyCode: 'CD2',
+ companyName: '회사2',
+ companyDomain: '회사2',
+ companyConfAuthYn: 'Y',
+ ucapUseYn: 'Y',
+ companyTimerChatAuthYn: 'Y'
+ },
+ {
+ companyCode: 'CD3',
+ companyName: '회사3',
+ companyDomain: '회사3',
+ companyConfAuthYn: 'Y',
+ ucapUseYn: 'Y',
+ companyTimerChatAuthYn: 'Y'
+ }
+ ]
}
});
diff --git a/projects/ui-organization/src/lib/components/search-for-tenant.component.theme.scss b/projects/ui-organization/src/lib/components/search-for-tenant.component.theme.scss
new file mode 100644
index 0000000..0021d41
--- /dev/null
+++ b/projects/ui-organization/src/lib/components/search-for-tenant.component.theme.scss
@@ -0,0 +1,24 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-organization-search-for-tenant-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-organization-search-for-tenant-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-organization-search-for-tenant-typography($config) {
+ .ucap-organization-search-for-tenant-container {
+ .searchword-container {
+ .form-field-input-searchword {
+ font-family: mat-font-family($config);
+ }
+ }
+ }
+}
diff --git a/projects/ui-organization/src/lib/components/search-for-tenant.component.ts b/projects/ui-organization/src/lib/components/search-for-tenant.component.ts
index 84aee0c..f791f70 100644
--- a/projects/ui-organization/src/lib/components/search-for-tenant.component.ts
+++ b/projects/ui-organization/src/lib/components/search-for-tenant.component.ts
@@ -8,11 +8,13 @@ import {
ChangeDetectorRef,
Input,
EventEmitter,
- Output
+ Output,
+ ViewChild,
+ ElementRef
} from '@angular/core';
import { Company } from '@ucap/api-external';
-import { MatSelectChange } from '@angular/material/select';
+import { MatSelectChange, MatSelect } from '@angular/material/select';
@Component({
selector: 'ucap-organization-search-for-tenant',
@@ -30,6 +32,9 @@ export class SearchForTenantComponent implements OnInit, OnDestroy {
@Input()
placeholder: string;
+ @Input()
+ multiple: boolean;
+
@Output()
changed: EventEmitter<{
companyCode: string;
@@ -39,7 +44,11 @@ export class SearchForTenantComponent implements OnInit, OnDestroy {
@Output()
canceled: EventEmitter
= new EventEmitter();
- companyCode: string;
+ @ViewChild('selectSearchCompany', { static: true })
+ selectSearchCompany: MatSelect;
+
+ @ViewChild('inputSearchWord', { static: true })
+ inputSearchWord: ElementRef;
private ngOnDestroySubject: Subject;
@@ -47,8 +56,6 @@ export class SearchForTenantComponent implements OnInit, OnDestroy {
ngOnInit(): void {
this.ngOnDestroySubject = new Subject();
-
- this.companyCode = this.defaultCompany;
}
ngOnDestroy(): void {
@@ -57,13 +64,26 @@ export class SearchForTenantComponent implements OnInit, OnDestroy {
}
}
- onChangeTenant(event: MatSelectChange) {
- this.companyCode = event.value;
+ onSelectionChangeTenant(event: MatSelectChange) {
+ this.changedSearchData();
}
- onKeyDownEnter(searchWord: string) {
- this.changed.emit({ companyCode: this.companyCode, searchWord });
+
+ onKeyupEnter(event: Event) {
+ this.changedSearchData();
}
- onClickCancel() {
+
+ onClickSearch(event: Event) {
+ this.changedSearchData();
+ }
+
+ onClickCancel(event: Event) {
this.canceled.emit();
}
+
+ private changedSearchData() {
+ this.changed.emit({
+ companyCode: this.selectSearchCompany.value,
+ searchWord: this.inputSearchWord.nativeElement.value
+ });
+ }
}
diff --git a/projects/ui-organization/src/lib/components/tree.component.scss b/projects/ui-organization/src/lib/components/tree.component.scss
index 09b8f4b..4f8e48b 100644
--- a/projects/ui-organization/src/lib/components/tree.component.scss
+++ b/projects/ui-organization/src/lib/components/tree.component.scss
@@ -1,4 +1,4 @@
-@import '~@ucap/ui-scss/ucap';
+@import '~@ucap/ng-ui-material/material';
.ucap-organization-tree-container {
padding-left: 17px;
@@ -7,6 +7,7 @@
.mat-tree {
background-color: transparent;
padding-right: 17px;
+
&:before {
content: '';
width: 21px;
@@ -18,6 +19,7 @@
left: 10px;
bottom: 0;
}
+
&:after {
content: '';
width: 21px;
@@ -29,5 +31,143 @@
left: 50px;
bottom: 0;
}
+
+ mat-tree-node[aria-expanded='true'] {
+ &.tree-has-child,
+ &.tree-no-child {
+ &:after {
+ background-color: white;
+ height: 46px;
+ }
+ }
+ }
+ mat-tree-node[aria-expanded='false'] {
+ &.tree-has-child,
+ &.tree-no-child {
+ &:after {
+ background-color: white;
+ height: 46px;
+ }
+ li {
+ background-color: transparent;
+ }
+ }
+ }
+
+ //mat tree
+ .tree-has-child {
+ align-items: flex-end !important;
+ min-height: 36px !important;
+ flex: 1;
+ position: relative;
+ &:before {
+ content: '';
+ width: 10px;
+ height: 55px;
+ display: inline-block;
+ border-left-color: #cccccc;
+ border-left-style: solid;
+ border-left-width: 1px;
+ border-bottom-color: #cccccc;
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ position: absolute;
+ margin: -30px 0 0 -10px;
+ z-index: 3;
+ }
+ &:after {
+ content: '';
+ width: 75%;
+ height: 56px;
+ display: inline-block;
+ position: absolute;
+ background-color: white;
+ margin: 0 0 0 -9px;
+ z-index: 2;
+ }
+ li {
+ width: 100%;
+ position: relative;
+ z-index: 4;
+ padding: 0 0 10px;
+ //background-color: white;
+ .tree-node-body {
+ display: flex;
+ flex-direction: row;
+ align-content: center;
+ background-color: white;
+ border: 1px solid #999999;
+ border-radius: 2px;
+ position: relative;
+ z-index: 4;
+ .mat-icon-button {
+ width: 34px;
+ height: 34px;
+ line-height: 34px;
+ }
+ .dept-name {
+ display: flex;
+ align-self: center;
+ font: {
+ size: 14px;
+ }
+ color: #333333;
+ }
+ }
+ }
+ }
+ .tree-no-child {
+ align-items: flex-end !important;
+ min-height: 36px !important;
+ flex: 1;
+ position: relative;
+ &:before {
+ content: '';
+ width: 10px;
+ height: 55px;
+ display: inline-block;
+ border-left-color: #cccccc;
+ border-left-style: solid;
+ border-left-width: 1px;
+ border-bottom-color: #cccccc;
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ position: absolute;
+ margin: -30px 0 0 -10px;
+ z-index: 3;
+ }
+ &:after {
+ content: '';
+ width: 65%;
+ height: 56px;
+ display: inline-block;
+ position: absolute;
+ background-color: white;
+ margin-left: -10px;
+ z-index: 2;
+ }
+ li {
+ width: 100%;
+ position: relative;
+ z-index: 4;
+ padding: 0 0 10px;
+
+ .tree-node-body {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ background-color: #f7f8fa;
+ border-radius: 2px;
+ font: {
+ size: 14px;
+ }
+ color: #333333;
+ height: 36px;
+ padding-left: 20px;
+ position: relative;
+ z-index: 4;
+ }
+ }
+ }
}
}
diff --git a/projects/ui-organization/src/lib/components/tree.component.stories.ts b/projects/ui-organization/src/lib/components/tree.component.stories.ts
index b1a899c..2403bd0 100644
--- a/projects/ui-organization/src/lib/components/tree.component.stories.ts
+++ b/projects/ui-organization/src/lib/components/tree.component.stories.ts
@@ -1,15 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { OrganizationUiModule } from '../organization-ui.module';
+
import { TreeComponent } from './tree.component';
-const TITLE = 'organization::TreeComponent';
-
export default {
- title: `${TITLE}`,
- component: TreeComponent
+ title: 'ui-organization::TreeComponent',
+ component: TreeComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, OrganizationUiModule],
+ providers: []
+ })
+ ]
};
-export const Blank = () => ({
+export const Default = () => ({
+ component: TreeComponent,
props: {}
});
diff --git a/projects/ui-organization/src/lib/components/tree.component.theme.scss b/projects/ui-organization/src/lib/components/tree.component.theme.scss
new file mode 100644
index 0000000..316c7a6
--- /dev/null
+++ b/projects/ui-organization/src/lib/components/tree.component.theme.scss
@@ -0,0 +1,24 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-organization-tree-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-organization-tree-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-organization-tree-typography($config) {
+ .ucap-organization-tree-container {
+ .searchword-container {
+ .form-field-input-searchword {
+ font-family: mat-font-family($config);
+ }
+ }
+ }
+}
diff --git a/projects/ui-organization/src/lib/components/tree.component.ts b/projects/ui-organization/src/lib/components/tree.component.ts
index df1b34a..37a7d8e 100644
--- a/projects/ui-organization/src/lib/components/tree.component.ts
+++ b/projects/ui-organization/src/lib/components/tree.component.ts
@@ -1,3 +1,6 @@
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
import {
Component,
OnInit,
@@ -10,20 +13,20 @@ import {
Output
} from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { FlatTreeControl } from '@angular/cdk/tree';
import { MatTreeFlattener, MatTree } from '@angular/material/tree';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+
+import { LoginResponse } from '@ucap/protocol-authentication';
import { DeptInfo } from '@ucap/protocol-query';
-import { VirtualScrollTreeFlatDataSource } from '@ucap/ng-ui';
import { LogService } from '@ucap/ng-logger';
-import { LoginResponse } from '@ucap/protocol-authentication';
-import { trigger, transition, style, animate } from '@angular/animations';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { VirtualScrollTreeFlatDataSource } from '@ucap/ng-ui';
export interface OrganizationNode {
deptInfo: DeptInfo;
@@ -58,7 +61,11 @@ export class TreeComponent implements OnInit, OnDestroy {
loginRes: LoginResponse;
@Input()
- set deptInfoList(data: { deptInfoList: DeptInfo[]; displayRoot?: boolean }) {
+ set deptInfoList(data: {
+ deptInfoList: DeptInfo[];
+ expanded?: number[];
+ displayRoot?: boolean;
+ }) {
const deptInfoList = data.deptInfoList;
const displayRoot =
undefined === data.displayRoot ? true : data.displayRoot;
@@ -112,6 +119,13 @@ export class TreeComponent implements OnInit, OnDestroy {
});
this.dataSource.data = rootNodeList;
+
+ if (!!data.expanded) {
+ data.expanded.forEach((s) => {
+ this.expand(s);
+ });
+ }
+
this.changeDetectorRef.detectChanges();
}
@@ -190,4 +204,36 @@ export class TreeComponent implements OnInit, OnDestroy {
onClickNode(node: FlatNode) {
this.clickNode.emit(node.data.deptInfo);
}
+
+ expand(deptSeq: number) {
+ if (!this.treeControl.dataNodes) {
+ return;
+ }
+ const node = this.treeControl.dataNodes.find(
+ (n) => n.data.deptInfo.seq === deptSeq
+ );
+ if (!!node) {
+ this.treeControl.expand(node);
+ }
+ }
+
+ expandAll() {
+ this.treeControl.expandAll();
+ }
+
+ collapse(deptSeq: number) {
+ if (!this.treeControl.dataNodes) {
+ return;
+ }
+ const node = this.treeControl.dataNodes.find(
+ (n) => n.data.deptInfo.seq === deptSeq
+ );
+ if (!!node) {
+ this.treeControl.collapse(node);
+ }
+ }
+
+ collapseAll() {
+ this.treeControl.collapseAll();
+ }
}
diff --git a/projects/ui-organization/src/lib/organization-ui.module.ts b/projects/ui-organization/src/lib/organization-ui.module.ts
index e5581aa..c7f4130 100644
--- a/projects/ui-organization/src/lib/organization-ui.module.ts
+++ b/projects/ui-organization/src/lib/organization-ui.module.ts
@@ -7,12 +7,14 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatRippleModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatTreeModule } from '@angular/material/tree';
+import { MatTooltipModule } from '@angular/material/tooltip';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@@ -23,23 +25,28 @@ import { _MODULE_CONFIG } from './config/token';
import { Profile01Component } from './components/profile-01.component';
import { ProfileListItem01Component } from './components/profile-list-item-01.component';
+import { ProfileImage01Component } from './components/profile-image-01.component';
import {
ProfileListComponent,
ProfileListNodeDirective
} from './components/profile-list.component';
+import { ProfileSelection01Component } from './components/profile-selection-01.component';
import { SearchForTenantComponent } from './components/search-for-tenant.component';
import { TreeComponent } from './components/tree.component';
import { TranslatePipe } from './pipes/translate.pipe';
import { TranslateService } from './services/translate.service';
+import { UCAP_I18N_NAMESPACE, I18nModule } from '@ucap/ng-i18n';
const COMPONENTS = [
- TreeComponent,
Profile01Component,
ProfileListItem01Component,
ProfileListComponent,
- SearchForTenantComponent
+ ProfileImage01Component,
+ ProfileSelection01Component,
+ SearchForTenantComponent,
+ TreeComponent
];
const DIALOGS = [];
const PIPES = [TranslatePipe];
@@ -61,20 +68,29 @@ export class OrganizationUiRootModule {}
MatButtonModule,
MatCheckboxModule,
+ MatChipsModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatRippleModule,
MatSelectModule,
MatTreeModule,
+ MatTooltipModule,
PerfectScrollbarModule,
- UiModule
+ UiModule,
+ I18nModule
],
exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],
declarations: [...COMPONENTS, ...DIRECTIVES, ...PIPES],
- entryComponents: [...DIALOGS]
+ entryComponents: [...DIALOGS],
+ providers: [
+ {
+ provide: UCAP_I18N_NAMESPACE,
+ useValue: ['organization']
+ }
+ ]
})
export class OrganizationUiModule {
public static forRoot(
diff --git a/projects/ui-organization/src/lib/utils/presence.util.ts b/projects/ui-organization/src/lib/utils/presence.util.ts
new file mode 100644
index 0000000..4a7581a
--- /dev/null
+++ b/projects/ui-organization/src/lib/utils/presence.util.ts
@@ -0,0 +1,172 @@
+import { PresenceType, StatusCode } from '@ucap/core';
+
+import { StatusBulkInfo } from '@ucap/protocol-status';
+
+export class PresenceUtil {
+ /**
+ * Returns css class name of presence
+ * Format
+ * ucap-organization-presence-none
+ * ucap-organization-presence-pc-online
+ * ucap-organization-presence-pc-offline
+ * ucap-organization-presence-pc-busy
+ * ucap-organization-presence-pc-away
+ * ucap-organization-presence-pc-away2
+ * ucap-organization-presence-pc-none
+ *
+ * ucap-organization-presence-mobile-online
+ * ucap-organization-presence-mobile-offline
+ * ucap-organization-presence-mobile-busy
+ * ucap-organization-presence-mobile-away
+ * ucap-organization-presence-mobile-away2
+ * ucap-organization-presence-mobile-none
+ *
+ * @param statusBulkInfo status info.
+ * @param presenceType presence type.
+ */
+ static cssClass(
+ statusBulkInfo: StatusBulkInfo,
+ presenceType: PresenceType
+ ): string {
+ const statusCode = PresenceUtil.getStatusCode(statusBulkInfo, presenceType);
+ if (!statusCode) {
+ return 'ucap-organization-presence-none';
+ }
+
+ let cssClass = `ucap-organization-presence-${presenceType}`;
+
+ switch (statusCode) {
+ case StatusCode.OnLine:
+ cssClass = `${cssClass}-online`;
+ break;
+ case StatusCode.Offline:
+ cssClass = `${cssClass}-offline`;
+ break;
+ case StatusCode.Busy:
+ cssClass = `${cssClass}-busy`;
+ break;
+ case StatusCode.Away:
+ cssClass = `${cssClass}-away`;
+ break;
+ case StatusCode.Away2:
+ cssClass = `${cssClass}-away2`;
+ break;
+ default:
+ cssClass = `${cssClass}-none`;
+ break;
+ }
+
+ return cssClass;
+ }
+
+ /**
+ * Returns whether online
+ * @param statusBulkInfo status info.
+ * @param presenceType presence type.
+ */
+ static isOnline(
+ statusBulkInfo: StatusBulkInfo,
+ presenceType: PresenceType
+ ): boolean {
+ const statusCode = PresenceUtil.getStatusCode(statusBulkInfo, presenceType);
+ if (!statusCode) {
+ return false;
+ }
+
+ return StatusCode.OnLine === statusCode;
+ }
+
+ /**
+ * Returns whether offline
+ * @param statusBulkInfo status info.
+ * @param presenceType presence type.
+ */
+ static isOffline(
+ statusBulkInfo: StatusBulkInfo,
+ presenceType: PresenceType
+ ): boolean {
+ const statusCode = PresenceUtil.getStatusCode(statusBulkInfo, presenceType);
+ if (!statusCode) {
+ return false;
+ }
+
+ return StatusCode.Offline === statusCode;
+ }
+
+ /**
+ * Returns whether busy
+ * @param statusBulkInfo status info.
+ * @param presenceType presence type.
+ */
+ static isBusy(
+ statusBulkInfo: StatusBulkInfo,
+ presenceType: PresenceType
+ ): boolean {
+ const statusCode = PresenceUtil.getStatusCode(statusBulkInfo, presenceType);
+ if (!statusCode) {
+ return false;
+ }
+
+ return StatusCode.Busy === statusCode;
+ }
+
+ /**
+ * Returns whether away
+ * @param statusBulkInfo status info.
+ * @param presenceType presence type.
+ */
+ static isAway(
+ statusBulkInfo: StatusBulkInfo,
+ presenceType: PresenceType
+ ): boolean {
+ const statusCode = PresenceUtil.getStatusCode(statusBulkInfo, presenceType);
+ if (!statusCode) {
+ return false;
+ }
+
+ return StatusCode.Away === statusCode;
+ }
+
+ /**
+ * Returns whether away2
+ * @param statusBulkInfo status info.
+ * @param presenceType presence type.
+ */
+ static isAway2(
+ statusBulkInfo: StatusBulkInfo,
+ presenceType: PresenceType
+ ): boolean {
+ const statusCode = PresenceUtil.getStatusCode(statusBulkInfo, presenceType);
+ if (!statusCode) {
+ return false;
+ }
+
+ return StatusCode.Away2 === statusCode;
+ }
+
+ private static getStatusCode(
+ statusBulkInfo: StatusBulkInfo,
+ presenceType: PresenceType
+ ): StatusCode {
+ if (!statusBulkInfo || !presenceType) {
+ return undefined;
+ }
+
+ switch (presenceType) {
+ case PresenceType.PC:
+ return statusBulkInfo.pcStatus;
+ case PresenceType.MOBILE:
+ return statusBulkInfo.mobileStatus;
+ case PresenceType.MOBILE_CONFERENCE:
+ return statusBulkInfo.mobileConferenceStatus;
+ case PresenceType.PHONE:
+ return statusBulkInfo.phoneStatus;
+ case PresenceType.CONFERENCE:
+ return statusBulkInfo.conferenceStatus;
+ case PresenceType.IMESSENER:
+ return statusBulkInfo.imessengerStatus;
+ default:
+ return undefined;
+ }
+ }
+}
diff --git a/projects/ui-organization/src/public-api.ts b/projects/ui-organization/src/public-api.ts
index 0cc38c2..00062c9 100644
--- a/projects/ui-organization/src/public-api.ts
+++ b/projects/ui-organization/src/public-api.ts
@@ -6,6 +6,9 @@ export * from './lib/config/module-config';
export * from './lib/components/profile-01.component';
export * from './lib/components/profile-list-item-01.component';
+export * from './lib/components/profile-list.component';
+export * from './lib/components/profile-selection-01.component';
+export * from './lib/components/search-for-tenant.component';
export * from './lib/components/tree.component';
export * from './lib/pipes/translate.pipe';
@@ -14,4 +17,6 @@ export * from './lib/services/translate.service';
export * from './lib/types/call.type';
+export * from './lib/utils/presence.util';
+
export * from './lib/organization-ui.module';
diff --git a/projects/ui-skin-default/package.json b/projects/ui-skin-default/package.json
index 2db9d4a..873febc 100644
--- a/projects/ui-skin-default/package.json
+++ b/projects/ui-skin-default/package.json
@@ -5,6 +5,7 @@
"registry": "https://nexus.loafle.net/repository/npm-ucap/"
},
"peerDependencies": {
- "@ucap/uc-scss": "~0.0.1"
+ "@ucap/ui-scss": "~0.0.1",
+ "@ucap/ng-ui-material": "~0.0.1"
}
}
diff --git a/projects/ui-skin-default/scss-bundle.config.json b/projects/ui-skin-default/scss-bundle.config.json
index ca5a6bb..a85669a 100644
--- a/projects/ui-skin-default/scss-bundle.config.json
+++ b/projects/ui-skin-default/scss-bundle.config.json
@@ -5,7 +5,7 @@
"outFile": "./dist/ui-skin-default/_skin.scss",
"dedupeGlobs": [],
"includePaths": [],
- "ignoreImports": ["~@angular/.*"],
+ "ignoreImports": ["~@ucap/.*", "~@angular/.*"],
"logLevel": "silent"
}
}
diff --git a/projects/ui-skin-default/src/assets/scss/file-icon/_fonts.scss b/projects/ui-skin-default/src/assets/scss/file-icon/_fonts.scss
index 555ba22..b60df55 100644
--- a/projects/ui-skin-default/src/assets/scss/file-icon/_fonts.scss
+++ b/projects/ui-skin-default/src/assets/scss/file-icon/_fonts.scss
@@ -11,10 +11,12 @@
}
.material-icons {
- font-family: 'Material Icons';
- font-weight: normal;
- font-style: normal;
- font-size: 24px;
+ font: {
+ family: 'Material Icons';
+ weight: normal;
+ style: normal;
+ size: 24px;
+ }
line-height: 1;
letter-spacing: normal;
text-transform: none;
diff --git a/projects/ui-skin-default/src/assets/scss/file-icon/_icons.scss b/projects/ui-skin-default/src/assets/scss/file-icon/_icons.scss
index 9c1ae1c..2f36777 100644
--- a/projects/ui-skin-default/src/assets/scss/file-icon/_icons.scss
+++ b/projects/ui-skin-default/src/assets/scss/file-icon/_icons.scss
@@ -189,8 +189,11 @@ $icon-list: ('3dm', '', $world), ('3dmf', '', $world), ('7z', '', $zip),
overflow: visible;
// z-index: 9;
content: '';
- font-family: 'Material Icons';
- font-size: $icon-container-size / 4.2;
+ font: {
+ family: 'Material Icons';
+ size: $icon-container-size / 4.2;
+ }
+
opacity: 0.8;
}
@@ -236,7 +239,10 @@ $icon-list: ('3dm', '', $world), ('3dmf', '', $world), ('7z', '', $zip),
top: 33%;
left: 0;
right: 0;
- font-size: 28px;
+ font: {
+ size: 28px;
+ }
+
color: $shape-color;
opacity: 0.8;
}
diff --git a/projects/ui-skin-default/src/assets/scss/partials/_dialogs.scss b/projects/ui-skin-default/src/assets/scss/partials/_dialogs.scss
index d3badd3..b379293 100644
--- a/projects/ui-skin-default/src/assets/scss/partials/_dialogs.scss
+++ b/projects/ui-skin-default/src/assets/scss/partials/_dialogs.scss
@@ -56,7 +56,10 @@
margin: 0;
}
.btn-dialog-close {
- font-size: 20px;
+ font: {
+ size: 20px;
+ }
+
display: flex;
margin-left: auto;
align-self: flex-start;
diff --git a/projects/ui-skin-default/src/assets/scss/partials/_forms.scss b/projects/ui-skin-default/src/assets/scss/partials/_forms.scss
index c2d7837..eca7418 100644
--- a/projects/ui-skin-default/src/assets/scss/partials/_forms.scss
+++ b/projects/ui-skin-default/src/assets/scss/partials/_forms.scss
@@ -22,7 +22,9 @@ textarea {
}
.mat-form-field-label {
color: currentColor;
- font-size: 1em;
+ font: {
+ size: 1em;
+ }
}
}
@@ -39,7 +41,9 @@ textarea {
width: 100%;
.mat-form-field-infix {
.mat-input-element {
- font-size: 1em;
+ font: {
+ size: 1em;
+ }
}
}
.mat-form-field-suffix {
@@ -51,14 +55,18 @@ textarea {
height: 100%;
display: flex;
justify-content: center;
- font-size: 1.2em;
+ font: {
+ size: 1.2em;
+ }
}
}
}
.mat-form-field-label {
color: currentColor;
opacity: 0.7;
- font-size: 1em;
+ font: {
+ size: 1em;
+ }
}
.mat-form-field-underline {
height: 0;
@@ -107,7 +115,9 @@ textarea {
top: 0;
color: currentColor;
opacity: 0.7;
- font-size: 0.9em;
+ font: {
+ size: 0.9em;
+ }
}
}
}
@@ -123,7 +133,9 @@ textarea {
}
.mat-error {
- font-size: 0.84em;
+ font: {
+ size: 0.84em;
+ }
}
.mat-form-field {
@@ -133,7 +145,10 @@ textarea {
.mat-input-server:focus
+ .mat-form-field-label-wrapper
.mat-form-field-label {
- font-size: 0.7em;
+ font: {
+ size: 0.7em;
+ }
+
transform: translateY(-1.4em) scale(1);
}
.mat-form-field-underline {
@@ -160,7 +175,9 @@ textarea {
.mat-form-field-wrapper {
padding: 0;
@media screen and (max-width: 1024px) {
- font-size: 0.9em;
+ font: {
+ size: 0.9em;
+ }
}
.mat-form-field-infix {
padding: 0.4375em 0;
diff --git a/projects/ui-skin-default/src/assets/scss/partials/_icons.scss b/projects/ui-skin-default/src/assets/scss/partials/_icons.scss
index 6558e0c..438f7e4 100644
--- a/projects/ui-skin-default/src/assets/scss/partials/_icons.scss
+++ b/projects/ui-skin-default/src/assets/scss/partials/_icons.scss
@@ -1,6 +1,8 @@
i,
mat-icon {
- font-size: 24px;
+ font: {
+ size: 24px;
+ }
width: 24px;
height: 24px;
line-height: 24px;
@@ -11,7 +13,10 @@ mat-icon {
@for $size from 2 through 128 {
&.s#{$infix}-#{$size * 2} {
- font-size: #{($size * 2) + 'px'} !important;
+ font: {
+ size: #{($size * 2) + 'px'} !important;
+ }
+
width: #{($size * 2) + 'px'} !important;
height: #{($size * 2) + 'px'} !important;
min-width: #{($size * 2) + 'px'} !important;
@@ -43,38 +48,50 @@ mat-icon {
}
i {
&.mdi {
- font-family: 'material-outline-icons';
- font-size: 20px;
+ font: {
+ family: 'material-outline-icons';
+ size: 20px;
+ weight: normal;
+ }
width: 20px;
height: 20px;
line-height: 20px;
- font-weight: normal;
&-16 {
- font-size: 16px;
+ font: {
+ size: 16px;
+ }
width: 16px;
height: 16px;
line-height: 16px;
}
&-18 {
- font-size: 18px;
+ font: {
+ size: 18px;
+ }
width: 18px;
height: 18px;
line-height: 18px;
}
&-24 {
- font-size: 24px;
+ font: {
+ size: 24px;
+ }
width: 24px;
height: 24px;
line-height: 24px;
}
&-30 {
- font-size: 30px;
+ font: {
+ size: 30px;
+ }
width: 30px;
height: 30px;
line-height: 30px;
}
&-48 {
- font-size: 48px;
+ font: {
+ size: 48px;
+ }
width: 47px;
height: 48px;
line-height: 48px;
diff --git a/projects/ui-skin-default/src/assets/scss/partials/_list-item.scss b/projects/ui-skin-default/src/assets/scss/partials/_list-item.scss
index 6e940c1..771f51e 100644
--- a/projects/ui-skin-default/src/assets/scss/partials/_list-item.scss
+++ b/projects/ui-skin-default/src/assets/scss/partials/_list-item.scss
@@ -31,7 +31,9 @@ $line-basic: 1px solid #dddddd;
.tree-node-frame {
height: $listH-row2;
.group-name {
- font-size: 0.96em;
+ font: {
+ size: 0.96em;
+ }
}
}
}
@@ -79,7 +81,9 @@ $line-basic: 1px solid #dddddd;
align-content: center;
justify-content: center;
.mat-icon {
- font-size: 1em;
+ font: {
+ size: 1em;
+ }
width: 18px;
height: 18px;
line-height: 18px;
@@ -94,34 +98,50 @@ $line-basic: 1px solid #dddddd;
position: absolute;
right: 30px;
bottom: 20px;
- font-size: 0.9em;
+ font: {
+ size: 0.9em;
+ }
}
}
//list-item 폰트 사이즈
.list-item {
- font-size: 1em;
+ font: {
+ size: 1em;
+ }
.name {
- font-weight: 600;
+ font: {
+ weight: 600;
+ }
+
@include ellipsis(1);
}
.grade {
- font-size: 0.8em;
+ font: {
+ size: 0.8em;
+ }
margin-left: 4px;
color: #777777;
}
.work-status,
.member {
- font-size: 0.8em;
+ font: {
+ size: 0.8em;
+ }
}
.final-message,
.dept {
- font-size: 0.86em;
+ font: {
+ size: 0.86em;
+ }
color: #777777;
@include ellipsis(1);
}
.date {
- font-size: 0.8em;
+ font: {
+ size: 0.8em;
+ }
+
@include ellipsis(1);
}
}
diff --git a/projects/ui-skin-default/src/assets/scss/partials/_normalize.scss b/projects/ui-skin-default/src/assets/scss/partials/_normalize.scss
index 037c5d3..6a4f156 100644
--- a/projects/ui-skin-default/src/assets/scss/partials/_normalize.scss
+++ b/projects/ui-skin-default/src/assets/scss/partials/_normalize.scss
@@ -45,7 +45,10 @@ section {
*/
h1 {
- font-size: 2em;
+ font: {
+ size: 2em;
+ }
+
margin: 0.67em 0;
}
@@ -89,8 +92,10 @@ hr {
*/
pre {
- font-family: monospace, monospace; /* 1 */
- font-size: 1em; /* 2 */
+ font: {
+ family: monospace, monospace; /* 1 */
+ size: 1em; /* 2 */
+ }
}
/* Text-level semantics
@@ -144,7 +149,9 @@ code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
- font-size: 1em; /* 2 */
+ font {
+ size: 1em; /* 2 */
+ }
}
/**
@@ -169,7 +176,9 @@ mark {
*/
small {
- font-size: 80%;
+ font: {
+ size: 80%;
+ }
}
/**
@@ -179,7 +188,9 @@ small {
sub,
sup {
- font-size: 75%;
+ font: {
+ size: 75%;
+ }
line-height: 0;
position: relative;
vertical-align: baseline;
@@ -244,7 +255,10 @@ optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
- font-size: 100%; /* 1 */
+ font: {
+ size: 100%; /* 1 */
+ }
+
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
diff --git a/projects/ui-skin-default/src/assets/scss/partials/_search-frame.scss b/projects/ui-skin-default/src/assets/scss/partials/_search-frame.scss
index 84f352d..bd221ea 100644
--- a/projects/ui-skin-default/src/assets/scss/partials/_search-frame.scss
+++ b/projects/ui-skin-default/src/assets/scss/partials/_search-frame.scss
@@ -7,7 +7,10 @@ $search-font-size: 14px;
height: $search-frame;
align-items: center;
// padding: 0 10px 0 20px;
- font-size: $search-font-size;
+ font: {
+ size: $search-font-size;
+ }
+
background-color: #f9f9f9;
border-bottom: 1px solid #dddddd;
}
@@ -22,13 +25,17 @@ $search-font-size: 14px;
input {
display: inline-flex;
width: 100%;
- font-size: 1em;
+ font: {
+ size: 1em;
+ }
padding-left: 0;
line-height: 1.4em;
}
.btn-search {
color: #777777;
- font-size: 12px;
+ font: {
+ size: 12px;
+ }
display: inline-flex;
margin-left: auto;
flex: none;
@@ -52,7 +59,9 @@ $search-font-size: 14px;
flex: 1 1 auto;
padding: 0 20px;
.mat-form-field-infix {
- font-size: 14px;
+ font: {
+ size: 14px;
+ }
border: none;
}
.mat-form-field-suffix {
@@ -124,13 +133,17 @@ $search-font-size: 14px;
input {
display: inline-flex;
width: 100%;
- font-size: 1em;
+ font: {
+ size: 1em;
+ }
line-height: 1.4em;
padding-left: 0;
}
.btn-search {
color: #777777;
- font-size: 12px;
+ font: {
+ size: 12px;
+ }
display: inline-flex;
margin-left: auto;
flex: none;
diff --git a/projects/ui/ng-package.json b/projects/ui/ng-package.json
index 6e1674f..2cf2b0d 100644
--- a/projects/ui/ng-package.json
+++ b/projects/ui/ng-package.json
@@ -3,6 +3,7 @@
"dest": "../../dist/ui",
"lib": {
"entryFile": "src/public-api.ts",
+ "styleIncludePaths": ["./src/assets/scss"],
"umdModuleIds": {
"moment": "moment",
"moment-timezone": "moment-timezone",
diff --git a/projects/ui/package.json b/projects/ui/package.json
index 7f88e4f..7272b49 100644
--- a/projects/ui/package.json
+++ b/projects/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@ucap/ng-ui",
- "version": "0.0.11",
+ "version": "0.0.19",
"publishConfig": {
"registry": "https://nexus.loafle.net/repository/npm-ucap/"
},
@@ -12,9 +12,10 @@
"@ucap/core": "~0.0.1",
"@ucap/api": "~0.0.1",
"@ucap/protocol-event": "~0.0.1",
- "@ucap/uc-scss": "~0.0.1",
+ "@ucap/ui-scss": "~0.0.1",
"@ucap/ng-core": "~0.0.1",
"@ucap/ng-api-common": "~0.0.1",
+ "@ucap/ng-ui-material": "~0.0.1",
"autolinker": "^3.13.0",
"libphonenumber-js": "^1.7.47",
"moment": "^2.24.0",
diff --git a/projects/ui/scss-bundle.config.json b/projects/ui/scss-bundle.config.json
new file mode 100644
index 0000000..dc82806
--- /dev/null
+++ b/projects/ui/scss-bundle.config.json
@@ -0,0 +1,11 @@
+{
+ "bundlerOptions": {
+ "entryFile": "./projects/ui/src/assets/scss/_theme.scss",
+ "rootDir": "./projects/ui/src/assets/scss/",
+ "outFile": "./dist/ui/_theme.scss",
+ "dedupeGlobs": [],
+ "includePaths": [],
+ "ignoreImports": ["~@ucap/.*", "~@angular/.*"],
+ "logLevel": "silent"
+ }
+}
diff --git a/projects/ui/src/assets/scss/_theme.scss b/projects/ui/src/assets/scss/_theme.scss
new file mode 100644
index 0000000..58834d9
--- /dev/null
+++ b/projects/ui/src/assets/scss/_theme.scss
@@ -0,0 +1,15 @@
+@import '../../lib/components/file-upload-queue.component.theme.scss';
+@import '../../lib/components/file-viewer.component.theme.scss';
+@import '../../lib/components/float-action-button.component.theme.scss';
+@import '../../lib/components/inline-edit-input.component.theme.scss';
+@import '../../lib/components/pick-date.component.theme.scss';
+@import '../../lib/components/pick-time.component.theme.scss';
+@import '../../lib/components/split-button.component.theme.scss';
+@import '../../lib/components/step-input.component.theme.scss';
+@import '../../lib/components/title-bar.component.theme.scss';
+
+@import '../../lib/components/file-viewer/binary-viewer.component.theme.scss';
+@import '../../lib/components/file-viewer/document-viewer.component.theme.scss';
+@import '../../lib/components/file-viewer/image-viewer.component.theme.scss';
+@import '../../lib/components/file-viewer/sound-viewer.component.theme.scss';
+@import '../../lib/components/file-viewer/video-viewer.component.theme.scss';
diff --git a/projects/ui/src/lib/components/file-upload-queue.component.scss b/projects/ui/src/lib/components/file-upload-queue.component.scss
index 8d0975c..659d9f4 100644
--- a/projects/ui/src/lib/components/file-upload-queue.component.scss
+++ b/projects/ui/src/lib/components/file-upload-queue.component.scss
@@ -40,7 +40,9 @@
}
.uploadItems {
width: 100%;
- font-size: 0.9em;
+ font: {
+ size: 0.9em;
+ }
.msg-guide {
display: flex;
flex: row;
diff --git a/projects/ui/src/lib/components/file-upload-queue.component.stories.ts b/projects/ui/src/lib/components/file-upload-queue.component.stories.ts
new file mode 100644
index 0000000..f82ecbf
--- /dev/null
+++ b/projects/ui/src/lib/components/file-upload-queue.component.stories.ts
@@ -0,0 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../ui.module';
+
+import { FileUploadQueueComponent } from './file-upload-queue.component';
+
+export default {
+ title: 'ui::FileUploadQueueComponent',
+ component: FileUploadQueueComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
+};
+
+export const Default = () => ({
+ component: FileUploadQueueComponent,
+ props: {}
+});
diff --git a/projects/ui/src/lib/components/file-upload-queue.component.theme.scss b/projects/ui/src/lib/components/file-upload-queue.component.theme.scss
new file mode 100644
index 0000000..6bb36ea
--- /dev/null
+++ b/projects/ui/src/lib/components/file-upload-queue.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-file-upload-queue-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-file-upload-queue-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-file-upload-queue-typography($config) {
+ .ucap-file-upload-queue-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/file-viewer.component.stories.ts b/projects/ui/src/lib/components/file-viewer.component.stories.ts
new file mode 100644
index 0000000..3bb5ff9
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer.component.stories.ts
@@ -0,0 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../ui.module';
+
+import { FileViewerComponent } from './file-viewer.component';
+
+export default {
+ title: 'ui::FileViewerComponent',
+ component: FileViewerComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
+};
+
+export const Default = () => ({
+ component: FileViewerComponent,
+ props: {}
+});
diff --git a/projects/ui/src/lib/components/file-viewer.component.theme.scss b/projects/ui/src/lib/components/file-viewer.component.theme.scss
new file mode 100644
index 0000000..c456dea
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-file-viewer-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-file-viewer-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-file-viewer-typography($config) {
+ .ucap-file-viewer-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/file-viewer/binary-viewer.component.scss b/projects/ui/src/lib/components/file-viewer/binary-viewer.component.scss
index 3385ef7..94360b4 100644
--- a/projects/ui/src/lib/components/file-viewer/binary-viewer.component.scss
+++ b/projects/ui/src/lib/components/file-viewer/binary-viewer.component.scss
@@ -14,7 +14,9 @@
}
.ucap-binary-viewer-title {
- font-size: 16px;
+ font: {
+ size: 16px;
+ }
}
.ucap-binary-viewer-spacer {
@@ -56,7 +58,9 @@
background-color: rgba(256, 256, 256, 0.7);
}
.guide-msg {
- font-size: 16px;
+ font: {
+ size: 16px;
+ }
margin: 30px;
color: #ffffff;
}
diff --git a/projects/ui/src/lib/components/file-viewer/binary-viewer.component.stories.ts b/projects/ui/src/lib/components/file-viewer/binary-viewer.component.stories.ts
new file mode 100644
index 0000000..a9b1bcd
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/binary-viewer.component.stories.ts
@@ -0,0 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../../ui.module';
+
+import { BinaryViewerComponent } from './binary-viewer.component';
+
+export default {
+ title: 'ui::BinaryViewerComponent',
+ component: BinaryViewerComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
+};
+
+export const Default = () => ({
+ component: BinaryViewerComponent,
+ props: {}
+});
diff --git a/projects/ui/src/lib/components/file-viewer/binary-viewer.component.theme.scss b/projects/ui/src/lib/components/file-viewer/binary-viewer.component.theme.scss
new file mode 100644
index 0000000..62b58c7
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/binary-viewer.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-binary-viewer-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-binary-viewer-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-binary-viewer-typography($config) {
+ .ucap-binary-viewer-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/file-viewer/document-viewer.component.stories.ts b/projects/ui/src/lib/components/file-viewer/document-viewer.component.stories.ts
new file mode 100644
index 0000000..16bb727
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/document-viewer.component.stories.ts
@@ -0,0 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../../ui.module';
+
+import { DocumentViewerComponent } from './document-viewer.component';
+
+export default {
+ title: 'ui::DocumentViewerComponent',
+ component: DocumentViewerComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
+};
+
+export const Default = () => ({
+ component: DocumentViewerComponent,
+ props: {}
+});
diff --git a/projects/ui/src/lib/components/file-viewer/document-viewer.component.theme.scss b/projects/ui/src/lib/components/file-viewer/document-viewer.component.theme.scss
new file mode 100644
index 0000000..9da753a
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/document-viewer.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-document-viewer-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-document-viewer-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-document-viewer-typography($config) {
+ .ucap-document-viewer-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/file-viewer/image-viewer.component.scss b/projects/ui/src/lib/components/file-viewer/image-viewer.component.scss
index 887f670..1c204f4 100644
--- a/projects/ui/src/lib/components/file-viewer/image-viewer.component.scss
+++ b/projects/ui/src/lib/components/file-viewer/image-viewer.component.scss
@@ -13,7 +13,9 @@
}
.ucap-image-viewer-title {
- font-size: 16px;
+ font: {
+ size: 16px;
+ }
}
.ucap-image-viewer-spacer {
diff --git a/projects/ui/src/lib/components/file-viewer/image-viewer.component.stories.ts b/projects/ui/src/lib/components/file-viewer/image-viewer.component.stories.ts
new file mode 100644
index 0000000..a19d288
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/image-viewer.component.stories.ts
@@ -0,0 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../../ui.module';
+
+import { ImageViewerComponent } from './image-viewer.component';
+
+export default {
+ title: 'ui::ImageViewerComponent',
+ component: ImageViewerComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
+};
+
+export const Default = () => ({
+ component: ImageViewerComponent,
+ props: {}
+});
diff --git a/projects/ui/src/lib/components/file-viewer/image-viewer.component.theme.scss b/projects/ui/src/lib/components/file-viewer/image-viewer.component.theme.scss
new file mode 100644
index 0000000..8f49847
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/image-viewer.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-image-viewer-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-image-viewer-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-image-viewer-typography($config) {
+ .ucap-image-viewer-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/file-viewer/sound-viewer.component.scss b/projects/ui/src/lib/components/file-viewer/sound-viewer.component.scss
index 9419346..5d88ee0 100644
--- a/projects/ui/src/lib/components/file-viewer/sound-viewer.component.scss
+++ b/projects/ui/src/lib/components/file-viewer/sound-viewer.component.scss
@@ -13,7 +13,9 @@
}
.ucap-sound-viewer-title {
- font-size: 16px;
+ font: {
+ size: 16px;
+ }
}
.stroke-bar {
width: 1px;
@@ -44,7 +46,10 @@
border: 2px solid #ffffff;
background-color: rgba(256, 256, 256, 0.7);
.mat-icon {
- font-size: 100px;
+ font: {
+ size: 100px;
+ }
+
height: 100px;
width: 100px;
}
@@ -88,7 +93,10 @@
}
.ucap-sound-viewer-action {
.mat-icon {
- font-size: 40px;
+ font: {
+ size: 40px;
+ }
+
width: 100%;
height: 100%;
line-height: 50px;
diff --git a/projects/ui/src/lib/components/file-viewer/sound-viewer.component.stories.ts b/projects/ui/src/lib/components/file-viewer/sound-viewer.component.stories.ts
new file mode 100644
index 0000000..8eb03c3
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/sound-viewer.component.stories.ts
@@ -0,0 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../../ui.module';
+
+import { SoundViewerComponent } from './sound-viewer.component';
+
+export default {
+ title: 'ui::SoundViewerComponent',
+ component: SoundViewerComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
+};
+
+export const Default = () => ({
+ component: SoundViewerComponent,
+ props: {}
+});
diff --git a/projects/ui/src/lib/components/file-viewer/sound-viewer.component.theme.scss b/projects/ui/src/lib/components/file-viewer/sound-viewer.component.theme.scss
new file mode 100644
index 0000000..8c46ed5
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/sound-viewer.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-sound-viewer-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-sound-viewer-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-sound-viewer-typography($config) {
+ .ucap-sound-viewer-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/file-viewer/video-viewer.component.scss b/projects/ui/src/lib/components/file-viewer/video-viewer.component.scss
index ead7988..2bc56cc 100644
--- a/projects/ui/src/lib/components/file-viewer/video-viewer.component.scss
+++ b/projects/ui/src/lib/components/file-viewer/video-viewer.component.scss
@@ -13,7 +13,9 @@
}
.ucap-video-viewer-title {
- font-size: 16px;
+ font: {
+ size: 16px;
+ }
}
.stroke-bar {
width: 1px;
@@ -38,7 +40,10 @@
height: calc(100% - 80px);
.guide-msg {
- font-size: 16px;
+ font: {
+ size: 16px;
+ }
+
margin: 30px;
color: #ffffff;
}
@@ -72,7 +77,10 @@
}
.ucap-video-viewer-action {
.mat-icon {
- font-size: 40px;
+ font: {
+ size: 40px;
+ }
+
width: 100%;
height: 100%;
line-height: 40px;
diff --git a/projects/ui/src/lib/components/file-viewer/video-viewer.component.stories.ts b/projects/ui/src/lib/components/file-viewer/video-viewer.component.stories.ts
new file mode 100644
index 0000000..30ac551
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/video-viewer.component.stories.ts
@@ -0,0 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../../ui.module';
+
+import { VideoViewerComponent } from './video-viewer.component';
+
+export default {
+ title: 'ui::VideoViewerComponent',
+ component: VideoViewerComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
+};
+
+export const Default = () => ({
+ component: VideoViewerComponent,
+ props: {}
+});
diff --git a/projects/ui/src/lib/components/file-viewer/video-viewer.component.theme.scss b/projects/ui/src/lib/components/file-viewer/video-viewer.component.theme.scss
new file mode 100644
index 0000000..818dceb
--- /dev/null
+++ b/projects/ui/src/lib/components/file-viewer/video-viewer.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-video-viewer-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-video-viewer-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-video-viewer-typography($config) {
+ .ucap-video-viewer-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/float-action-button.component.stories.ts b/projects/ui/src/lib/components/float-action-button.component.stories.ts
index 4831e62..c00bf78 100644
--- a/projects/ui/src/lib/components/float-action-button.component.stories.ts
+++ b/projects/ui/src/lib/components/float-action-button.component.stories.ts
@@ -12,7 +12,7 @@ import { UiModule } from '../ui.module';
import { FloatActionButtonComponent } from './float-action-button.component';
export default {
- title: 'FloatActionButtonComponent',
+ title: 'ui::FloatActionButtonComponent',
component: FloatActionButtonComponent,
decorators: [
moduleMetadata({
@@ -22,7 +22,7 @@ export default {
]
};
-export const Text = () => ({
+export const Default = () => ({
props: {
buttons: object('Buttons', [
{
diff --git a/projects/ui/src/lib/components/float-action-button.component.theme.scss b/projects/ui/src/lib/components/float-action-button.component.theme.scss
new file mode 100644
index 0000000..0382404
--- /dev/null
+++ b/projects/ui/src/lib/components/float-action-button.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-float-action-button-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-float-action-button-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-float-action-button-typography($config) {
+ .ucap-float-action-button-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/inline-edit-input.component.stories.ts b/projects/ui/src/lib/components/inline-edit-input.component.stories.ts
index e1d7dd5..97f8cbe 100644
--- a/projects/ui/src/lib/components/inline-edit-input.component.stories.ts
+++ b/projects/ui/src/lib/components/inline-edit-input.component.stories.ts
@@ -1,16 +1,28 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { withKnobs, text, object } from '@storybook/addon-knobs';
+
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../ui.module';
+
import { InlineEditInputComponent } from './inline-edit-input.component';
export default {
- title: 'InlineEditInputComponent',
- component: InlineEditInputComponent
+ title: 'ui::InlineEditInputComponent',
+ component: InlineEditInputComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
};
-export const Text = () => ({
+export const Default = () => ({
component: InlineEditInputComponent,
- props: {
- text: 'Hello InlineEditInputComponent'
- }
+ props: {}
});
diff --git a/projects/ui/src/lib/components/inline-edit-input.component.theme.scss b/projects/ui/src/lib/components/inline-edit-input.component.theme.scss
new file mode 100644
index 0000000..f986b4a
--- /dev/null
+++ b/projects/ui/src/lib/components/inline-edit-input.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-inline-edit-input-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-inline-edit-input-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-inline-edit-input-typography($config) {
+ .ucap-inline-edit-input-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/inline-edit-input.component.ts b/projects/ui/src/lib/components/inline-edit-input.component.ts
index 633108a..9da4012 100644
--- a/projects/ui/src/lib/components/inline-edit-input.component.ts
+++ b/projects/ui/src/lib/components/inline-edit-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
@Component({
selector: 'ucap-inline-edit-input',
@@ -6,6 +6,9 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
styleUrls: ['./inline-edit-input.component.scss']
})
export class InlineEditInputComponent implements OnInit {
+ @Input()
+ initialMode = false;
+
@Output()
edit = new EventEmitter();
@Output()
@@ -24,7 +27,9 @@ export class InlineEditInputComponent implements OnInit {
constructor() {}
- ngOnInit() {}
+ ngOnInit() {
+ this.editMode = this.initialMode;
+ }
onClickEdit(event: Event) {
this.editMode = true;
@@ -32,12 +37,12 @@ export class InlineEditInputComponent implements OnInit {
}
onClickCancel(event: Event) {
- this.editMode = false;
+ this.editMode = this.initialMode;
this.cancel.emit(event);
}
onClickApply(event: Event) {
- this.editMode = false;
+ this.editMode = this.initialMode;
this.apply.emit(event);
}
}
diff --git a/projects/ui/src/lib/components/pick-date.component.stories.ts b/projects/ui/src/lib/components/pick-date.component.stories.ts
new file mode 100644
index 0000000..8d9e9ce
--- /dev/null
+++ b/projects/ui/src/lib/components/pick-date.component.stories.ts
@@ -0,0 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../ui.module';
+
+import { PickDateComponent } from './pick-date.component';
+
+export default {
+ title: 'ui::PickDateComponent',
+ component: PickDateComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
+};
+
+export const Default = () => ({
+ component: PickDateComponent,
+ props: {}
+});
diff --git a/projects/ui/src/lib/components/pick-date.component.theme.scss b/projects/ui/src/lib/components/pick-date.component.theme.scss
new file mode 100644
index 0000000..593a97e
--- /dev/null
+++ b/projects/ui/src/lib/components/pick-date.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-pick-date-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-pick-date-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-pick-date-typography($config) {
+ .ucap-pick-date-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/pick-time.component.stories.ts b/projects/ui/src/lib/components/pick-time.component.stories.ts
index c8856fc..6363be2 100644
--- a/projects/ui/src/lib/components/pick-time.component.stories.ts
+++ b/projects/ui/src/lib/components/pick-time.component.stories.ts
@@ -1,16 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../ui.module';
+
import { PickTimeComponent } from './pick-time.component';
export default {
- title: 'PickTimeComponent',
- component: PickTimeComponent
+ title: 'ui::PickTimeComponent',
+ component: PickTimeComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
};
-export const Text = () => ({
+export const Default = () => ({
component: PickTimeComponent,
- props: {
- text: 'Hello PickTimeComponent'
- }
+ props: {}
});
diff --git a/projects/ui/src/lib/components/pick-time.component.theme.scss b/projects/ui/src/lib/components/pick-time.component.theme.scss
new file mode 100644
index 0000000..131db54
--- /dev/null
+++ b/projects/ui/src/lib/components/pick-time.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-pick-time-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-pick-time-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-pick-time-typography($config) {
+ .ucap-pick-time-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/split-button.component.stories.ts b/projects/ui/src/lib/components/split-button.component.stories.ts
new file mode 100644
index 0000000..5417a00
--- /dev/null
+++ b/projects/ui/src/lib/components/split-button.component.stories.ts
@@ -0,0 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../ui.module';
+
+import { SplitButtonComponent } from './split-button.component';
+
+export default {
+ title: 'ui::SplitButtonComponent',
+ component: SplitButtonComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
+};
+
+export const Default = () => ({
+ component: SplitButtonComponent,
+ props: {}
+});
diff --git a/projects/ui/src/lib/components/split-button.component.theme.scss b/projects/ui/src/lib/components/split-button.component.theme.scss
new file mode 100644
index 0000000..110032d
--- /dev/null
+++ b/projects/ui/src/lib/components/split-button.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-split-button-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-split-button-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-split-button-typography($config) {
+ .ucap-split-button-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/step-input.component.scss b/projects/ui/src/lib/components/step-input.component.scss
index 480c6b6..e8d2f8e 100644
--- a/projects/ui/src/lib/components/step-input.component.scss
+++ b/projects/ui/src/lib/components/step-input.component.scss
@@ -23,7 +23,9 @@
height: 100%;
padding: 0 10px 0 0;
border: 0;
- font-size: 1rem;
+ font: {
+ size: 1rem;
+ }
color: inherit;
outline: none;
text-align: start;
@@ -43,7 +45,9 @@
.stepper {
height: 15px;
- font-size: 11px;
+ font: {
+ size: 11px;
+ }
cursor: pointer;
color: rgba(0, 0, 0, 0.4);
transition: color 0.2s;
diff --git a/projects/ui/src/lib/components/step-input.component.stories.ts b/projects/ui/src/lib/components/step-input.component.stories.ts
index 4b4dcd6..cf6e18c 100644
--- a/projects/ui/src/lib/components/step-input.component.stories.ts
+++ b/projects/ui/src/lib/components/step-input.component.stories.ts
@@ -1,16 +1,26 @@
+import { moduleMetadata } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { UiModule } from '../ui.module';
+
import { StepInputComponent } from './step-input.component';
export default {
- title: 'StepInputComponent',
- component: StepInputComponent
+ title: 'ui::StepInputComponent',
+ component: StepInputComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+ providers: []
+ })
+ ]
};
-export const Text = () => ({
+export const Default = () => ({
component: StepInputComponent,
- props: {
- text: 'Hello StepInputComponent'
- }
+ props: {}
});
diff --git a/projects/ui/src/lib/components/step-input.component.theme.scss b/projects/ui/src/lib/components/step-input.component.theme.scss
new file mode 100644
index 0000000..95bb3f6
--- /dev/null
+++ b/projects/ui/src/lib/components/step-input.component.theme.scss
@@ -0,0 +1,20 @@
+@import '~@ucap/ng-ui-material/material';
+
+@mixin ucap-step-input-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .ucap-step-input-container {
+ border-color: mat-color($foreground, secondary-text);
+ }
+}
+
+@mixin ucap-step-input-typography($config) {
+ .ucap-step-input-container {
+ font-family: mat-font-family($config);
+ }
+}
diff --git a/projects/ui/src/lib/components/title-bar.component.html b/projects/ui/src/lib/components/title-bar.component.html
index 70b851f..1047d06 100644
--- a/projects/ui/src/lib/components/title-bar.component.html
+++ b/projects/ui/src/lib/components/title-bar.component.html
@@ -103,7 +103,7 @@
class="ucap-title-bar-windows-button ucap-title-bar-windows-button-minimize"
aria-label="minimize"
tabIndex="-1"
- [style.width.px]="windowsControlsContainer.offsetHeight * 0.8"
+ [style.width.px]="windowsControlsContainerOffsetHeight * 0.8"
(click)="onClickMinimize($event)"
>
@@ -122,7 +122,7 @@
class="ucap-title-bar-windows-button ucap-title-bar-windows-button-maximize"
aria-label="maximize"
tabIndex="-1"
- [style.width.px]="windowsControlsContainer.offsetHeight * 0.8"
+ [style.width.px]="windowsControlsContainerOffsetHeight * 0.8"
(click)="onClickMaximize($event)"
>
@@ -133,8 +133,8 @@
x="0px"
y="0px"
viewBox="0 0 10 10"
- [style.width.px]="windowsControlsContainer.offsetHeight * 0.3"
- [style.height.px]="windowsControlsContainer.offsetHeight * 0.3"
+ [style.width.px]="windowsControlsContainerOffsetHeight * 0.3"
+ [style.height.px]="windowsControlsContainerOffsetHeight * 0.3"
>
@@ -159,7 +159,7 @@
class="ucap-title-bar-windows-button ucap-title-bar-windows-button-close"
aria-label="close"
tabIndex="-1"
- [style.width.px]="windowsControlsContainer.offsetHeight * 0.8"
+ [style.width.px]="windowsControlsContainerOffsetHeight * 0.8"
(click)="onClickClose($event)"
>
- 
+
+