diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index adb9d4f..25b4f44 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -114,7 +114,11 @@ iqser-dynamic-input { } .mdc-text-field--outlined { + --mdc-outlined-text-field-focus-outline-width: 1px; --mdc-shape-small: 8px; // border-radius + --mdc-outlined-text-field-container-shape: 8px; // border-radius + border-bottom-left-radius: var(--mdc-shape-small); + border-bottom-right-radius: var(--mdc-shape-small); } .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) { diff --git a/src/assets/styles/common-select.scss b/src/assets/styles/common-select.scss index bae0bc9..c82a587 100644 --- a/src/assets/styles/common-select.scss +++ b/src/assets/styles/common-select.scss @@ -3,7 +3,7 @@ .mat-mdc-select { padding: 0 11px; box-sizing: border-box; - line-height: var(--iqser-inputs-height); + --mat-select-trigger-text-line-height: 36px; } .mat-mdc-select-panel { diff --git a/src/assets/styles/common-toggle.scss b/src/assets/styles/common-toggle.scss index b82ed78..f463999 100644 --- a/src/assets/styles/common-toggle.scss +++ b/src/assets/styles/common-toggle.scss @@ -1,38 +1,40 @@ .mat-mdc-slide-toggle { - --mdc-switch-handle-elevation: none; + .mdc-switch { + --mdc-switch-handle-elevation: none; - --mdc-switch-selected-track-color: var(--iqser-primary); - --mdc-switch-selected-hover-track-color: var(--iqser-primary); - --mdc-switch-selected-pressed-track-color: var(--iqser-primary); - --mdc-switch-selected-focus-track-color: var(--iqser-primary); - --mdc-switch-disabled-selected-track-color: var(--iqser-primary); + --mdc-switch-selected-track-color: var(--iqser-primary); + --mdc-switch-selected-hover-track-color: var(--iqser-primary); + --mdc-switch-selected-pressed-track-color: var(--iqser-primary); + --mdc-switch-selected-focus-track-color: var(--iqser-primary); + --mdc-switch-disabled-selected-track-color: var(--iqser-primary); - --mdc-switch-unselected-track-color: var(--iqser-toggle-bg); - --mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg); - --mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg); - --mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg); - --mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg); + --mdc-switch-unselected-track-color: var(--iqser-toggle-bg); + --mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg); + --mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg); + --mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg); + --mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg); - --mdc-switch-selected-handle-color: var(--iqser-background); - --mdc-switch-selected-pressed-handle-color: var(--iqser-background); - --mdc-switch-selected-hover-handle-color: var(--iqser-background); - --mdc-switch-selected-focus-handle-color: var(--iqser-background); - --mdc-switch-disabled-selected-handle-color: var(--iqser-background); + --mdc-switch-selected-handle-color: var(--iqser-background); + --mdc-switch-selected-pressed-handle-color: var(--iqser-background); + --mdc-switch-selected-hover-handle-color: var(--iqser-background); + --mdc-switch-selected-focus-handle-color: var(--iqser-background); + --mdc-switch-disabled-selected-handle-color: var(--iqser-background); - --mdc-switch-unselected-handle-color: var(--iqser-alt-background); - --mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background); - --mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background); - --mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background); - --mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background); + --mdc-switch-unselected-handle-color: var(--iqser-alt-background); + --mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background); + --mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background); + --mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background); + --mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background); - --mdc-switch-disabled-track-opacity: 0.38; + --mdc-switch-disabled-track-opacity: 0.38; - --mdc-switch-track-width: 30px; - --mdc-switch-track-height: 16px; - --mdc-switch-track-shape: 8px; - --mdc-switch-handle-width: 12px; - --mdc-switch-handle-height: 12px; - --mdc-switch-handle-shape: 6px; + --mdc-switch-track-width: 30px; + --mdc-switch-track-height: 16px; + --mdc-switch-track-shape: 8px; + --mdc-switch-handle-width: 12px; + --mdc-switch-handle-height: 12px; + --mdc-switch-handle-shape: 6px; + } .mdc-form-field > label { margin-left: 8px; diff --git a/src/lib/dialog/iqser-dialog.service.ts b/src/lib/dialog/iqser-dialog.service.ts index 760adc9..599d65b 100644 --- a/src/lib/dialog/iqser-dialog.service.ts +++ b/src/lib/dialog/iqser-dialog.service.ts @@ -1,9 +1,9 @@ +import { ComponentType } from '@angular/cdk/portal'; import { inject, Injectable } from '@angular/core'; import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog'; -import { ComponentType } from '@angular/cdk/portal'; import { firstValueFrom } from 'rxjs'; -import { DATA_TYPE, IqserDialogComponent, RETURN_TYPE } from './iqser-dialog-component.directive'; import { defaultDialogConfig, largeDialogConfig } from './dialog.service'; +import { DATA_TYPE, IqserDialogComponent, RETURN_TYPE } from './iqser-dialog-component.directive'; @Injectable({ providedIn: 'root', @@ -12,32 +12,31 @@ export class IqserDialog { protected readonly _dialog = inject(MatDialog); open< - Component extends IqserDialogComponent, - Data extends Component[DATA_TYPE], - Return extends Component[RETURN_TYPE], + Component extends IqserDialogComponent, + Data extends Component[DATA_TYPE] = Component[DATA_TYPE], + Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE], >(dialog: ComponentType, config?: MatDialogConfig) { const ref = this._dialog.open(dialog, config); return { ...ref, result() { - console.log('result'); return firstValueFrom(ref.afterClosed()); }, } as MatDialogRef & { result(): Promise }; } openLarge< - Component extends IqserDialogComponent, - Data extends Component[DATA_TYPE], - Return extends Component[RETURN_TYPE], + Component extends IqserDialogComponent, + Data extends Component[DATA_TYPE] = Component[DATA_TYPE], + Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE], >(dialog: ComponentType, config?: MatDialogConfig) { return this.open(dialog, { ...largeDialogConfig, ...config }); } openDefault< - Component extends IqserDialogComponent, - Data extends Component[DATA_TYPE], - Return extends Component[RETURN_TYPE], + Component extends IqserDialogComponent, + Data extends Component[DATA_TYPE] = Component[DATA_TYPE], + Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE], >(dialog: ComponentType, config?: MatDialogConfig) { return this.open(dialog, { ...defaultDialogConfig, ...config }); } diff --git a/src/lib/inputs/editable-input/editable-input.component.ts b/src/lib/inputs/editable-input/editable-input.component.ts index 1a20d8a..bec7a5a 100644 --- a/src/lib/inputs/editable-input/editable-input.component.ts +++ b/src/lib/inputs/editable-input/editable-input.component.ts @@ -1,7 +1,7 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; -import { CircleButtonComponent, CircleButtonType } from '../../buttons'; import { NgIf } from '@angular/common'; +import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { FormsModule } from '@angular/forms'; +import { CircleButtonComponent, CircleButtonType, CircleButtonTypes } from '../../buttons'; @Component({ selector: 'iqser-editable-input [value]', @@ -22,9 +22,9 @@ export class EditableInputComponent implements OnChanges { @Input() class?: string; @Input() showPreview = true; @Input() canEdit = true; - @Input() buttonsType?: CircleButtonType; + @Input() buttonsType: CircleButtonType = CircleButtonTypes.default; @Output() readonly save = new EventEmitter(); - parentDimensions: { width: number; height: number }; + parentDimensions?: { width: number; height: number }; newValue = ''; private _editing = false;