From 53cc3c2955390a46d1f31fb50b3d44493d56343d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 20 Feb 2024 16:16:38 +0300 Subject: [PATCH 1/4] iconfield init --- angular.json | 3 + src/app/components/iconfield/iconfield.css | 276 ++++++++++++++++++ .../iconfield/iconfield.interface.ts | 89 ++++++ src/app/components/iconfield/iconfield.ts | 58 ++++ src/app/components/iconfield/ng-package.json | 6 + src/app/components/iconfield/public_api.ts | 2 + src/app/components/inputicon/inputicon.css | 276 ++++++++++++++++++ .../inputicon/inputicon.interface.ts | 89 ++++++ src/app/components/inputicon/inputicon.ts | 30 ++ src/app/components/inputicon/ng-package.json | 6 + src/app/components/inputicon/public_api.ts | 2 + src/app/showcase/doc/iconfield/basicdoc.ts | 63 ++++ .../doc/iconfield/iconfielddoc.module.ts | 18 ++ src/app/showcase/doc/iconfield/importdoc.ts | 12 + src/app/showcase/layout/app.routes.ts | 1 + .../iconfield/iconfielddemo-routing.module.ts | 10 + .../pages/iconfield/iconfielddemo.html | 1 + .../pages/iconfield/iconfielddemo.module.ts | 12 + .../pages/iconfield/iconfielddemo.scss | 0 .../showcase/pages/iconfield/iconfielddemo.ts | 23 ++ src/assets/showcase/data/menu.json | 4 + 21 files changed, 981 insertions(+) create mode 100755 src/app/components/iconfield/iconfield.css create mode 100644 src/app/components/iconfield/iconfield.interface.ts create mode 100755 src/app/components/iconfield/iconfield.ts create mode 100644 src/app/components/iconfield/ng-package.json create mode 100644 src/app/components/iconfield/public_api.ts create mode 100755 src/app/components/inputicon/inputicon.css create mode 100644 src/app/components/inputicon/inputicon.interface.ts create mode 100755 src/app/components/inputicon/inputicon.ts create mode 100644 src/app/components/inputicon/ng-package.json create mode 100644 src/app/components/inputicon/public_api.ts create mode 100644 src/app/showcase/doc/iconfield/basicdoc.ts create mode 100644 src/app/showcase/doc/iconfield/iconfielddoc.module.ts create mode 100644 src/app/showcase/doc/iconfield/importdoc.ts create mode 100755 src/app/showcase/pages/iconfield/iconfielddemo-routing.module.ts create mode 100755 src/app/showcase/pages/iconfield/iconfielddemo.html create mode 100755 src/app/showcase/pages/iconfield/iconfielddemo.module.ts create mode 100644 src/app/showcase/pages/iconfield/iconfielddemo.scss create mode 100755 src/app/showcase/pages/iconfield/iconfielddemo.ts diff --git a/angular.json b/angular.json index 29d34b6a331..3ff4f70e5a9 100644 --- a/angular.json +++ b/angular.json @@ -118,5 +118,8 @@ } } } + }, + "cli": { + "analytics": false } } \ No newline at end of file diff --git a/src/app/components/iconfield/iconfield.css b/src/app/components/iconfield/iconfield.css new file mode 100755 index 00000000000..c996776c864 --- /dev/null +++ b/src/app/components/iconfield/iconfield.css @@ -0,0 +1,276 @@ +@layer primeng { + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, + .p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, + .p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, + .p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, + .p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left p-galleriaitem, + .p-galleria-thumbnails-top p-galleriaitem { + order: 2; + } + + .p-galleria-thumbnails-left p-galleriathumbnails, + .p-galleria-thumbnails-top p-galleriathumbnails { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, + .p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, + .p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, + .p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper { + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, + .p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, + .p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, + .p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, + .p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + transition-property: background-color; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + .p-galleria-mask.p-galleria-mask-leave { + background-color: transparent; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } +} diff --git a/src/app/components/iconfield/iconfield.interface.ts b/src/app/components/iconfield/iconfield.interface.ts new file mode 100644 index 00000000000..328a421abdd --- /dev/null +++ b/src/app/components/iconfield/iconfield.interface.ts @@ -0,0 +1,89 @@ +import { TemplateRef } from '@angular/core'; +/** + * Responsive options of the component. + * @group Interface + */ +export interface GalleriaResponsiveOptions { + /** + * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...} + */ + breakpoint: string; + /** + * The number of visible items on breakpoint. + */ + numVisible: number; +} +/** + * Defines valid templates in Galleria. + * @group Templates + */ +export interface GalleriaTemplates { + /** + * Custom template of header. + */ + header(): TemplateRef; + /** + * Custom template of footer. + */ + footer(): TemplateRef; + /** + * Custom template of indicator. + * @param {Object} context - indicator data. + */ + indicator(context: { + /** + * Index of the item. + */ + $implicit: any; + }): TemplateRef<{ $implicit: any }>; + /** + * Custom template of closeicon. + */ + closeicon(): TemplateRef; + /** + * Custom template of itemnexticon. + */ + itemnexticon(): TemplateRef; + /** + * Custom template of itempreviousicon. + */ + itempreviousicon(): TemplateRef; + /** + * Custom template of previousthumbnailicon. + */ + previousthumbnailicon(): TemplateRef; + /** + * Custom template of nextthumbnailicon. + */ + nextthumbnailicon(): TemplateRef; + /** + * Custom template of caption. + * @param {Object} context - item data. + */ + caption(context: { + /** + * Item instance. + */ + $implicit: any; + }): TemplateRef<{ $implicit: any }>; + /** + * Custom template of thumbnail. + * @param {Object} context - item data. + */ + thumbnail(context: { + /** + * Item instance. + */ + $implicit: any; + }): TemplateRef<{ $implicit: any }>; + /** + * Custom template of item. + * @param {Object} context - item data. + */ + item(context: { + /** + * Item instance. + */ + $implicit: any; + }): TemplateRef<{ $implicit: any }>; +} diff --git a/src/app/components/iconfield/iconfield.ts b/src/app/components/iconfield/iconfield.ts new file mode 100755 index 00000000000..9fb99809d4c --- /dev/null +++ b/src/app/components/iconfield/iconfield.ts @@ -0,0 +1,58 @@ +import { CommonModule, DOCUMENT } from '@angular/common'; +import { + AfterContentInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + ElementRef, + EventEmitter, + Inject, + Injector, + Input, + NgModule, + OnChanges, + OnInit, + Output, + QueryList, + SimpleChanges, + TemplateRef, + ViewChild, + ViewEncapsulation, + forwardRef +} from '@angular/core'; + +import { PrimeTemplate, SharedModule } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; +import { DomHandler } from 'primeng/dom'; +import { AngleDownIcon } from 'primeng/icons/angledown'; +import { AngleUpIcon } from 'primeng/icons/angleup'; +import { TimesIcon } from 'primeng/icons/times'; +import { InputTextModule } from 'primeng/inputtext'; + +/** + * IconField wraps an input and an icon. + * @group Components + */ +@Component({ + selector: 'p-iconField', + template: ` `, + + host: { + class: 'p-element' + } +}) +export class IconField { + /** + * Whether to display the component on fullscreen. + * @group Props + */ + @Input() iconPosition: string | undefined; +} + +@NgModule({ + imports: [CommonModule, InputTextModule, ButtonModule, TimesIcon, AngleUpIcon, AngleDownIcon], + exports: [IconField, SharedModule], + declarations: [IconField] +}) +export class IconFieldModule {} diff --git a/src/app/components/iconfield/ng-package.json b/src/app/components/iconfield/ng-package.json new file mode 100644 index 00000000000..ab5467eb7e4 --- /dev/null +++ b/src/app/components/iconfield/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts" + } + } \ No newline at end of file diff --git a/src/app/components/iconfield/public_api.ts b/src/app/components/iconfield/public_api.ts new file mode 100644 index 00000000000..3bebb60f844 --- /dev/null +++ b/src/app/components/iconfield/public_api.ts @@ -0,0 +1,2 @@ +export * from './galleria'; +export * from './galleria.interface'; diff --git a/src/app/components/inputicon/inputicon.css b/src/app/components/inputicon/inputicon.css new file mode 100755 index 00000000000..c996776c864 --- /dev/null +++ b/src/app/components/inputicon/inputicon.css @@ -0,0 +1,276 @@ +@layer primeng { + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, + .p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, + .p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, + .p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, + .p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left p-galleriaitem, + .p-galleria-thumbnails-top p-galleriaitem { + order: 2; + } + + .p-galleria-thumbnails-left p-galleriathumbnails, + .p-galleria-thumbnails-top p-galleriathumbnails { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, + .p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, + .p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, + .p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper { + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, + .p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, + .p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, + .p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, + .p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + transition-property: background-color; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + .p-galleria-mask.p-galleria-mask-leave { + background-color: transparent; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } +} diff --git a/src/app/components/inputicon/inputicon.interface.ts b/src/app/components/inputicon/inputicon.interface.ts new file mode 100644 index 00000000000..328a421abdd --- /dev/null +++ b/src/app/components/inputicon/inputicon.interface.ts @@ -0,0 +1,89 @@ +import { TemplateRef } from '@angular/core'; +/** + * Responsive options of the component. + * @group Interface + */ +export interface GalleriaResponsiveOptions { + /** + * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...} + */ + breakpoint: string; + /** + * The number of visible items on breakpoint. + */ + numVisible: number; +} +/** + * Defines valid templates in Galleria. + * @group Templates + */ +export interface GalleriaTemplates { + /** + * Custom template of header. + */ + header(): TemplateRef; + /** + * Custom template of footer. + */ + footer(): TemplateRef; + /** + * Custom template of indicator. + * @param {Object} context - indicator data. + */ + indicator(context: { + /** + * Index of the item. + */ + $implicit: any; + }): TemplateRef<{ $implicit: any }>; + /** + * Custom template of closeicon. + */ + closeicon(): TemplateRef; + /** + * Custom template of itemnexticon. + */ + itemnexticon(): TemplateRef; + /** + * Custom template of itempreviousicon. + */ + itempreviousicon(): TemplateRef; + /** + * Custom template of previousthumbnailicon. + */ + previousthumbnailicon(): TemplateRef; + /** + * Custom template of nextthumbnailicon. + */ + nextthumbnailicon(): TemplateRef; + /** + * Custom template of caption. + * @param {Object} context - item data. + */ + caption(context: { + /** + * Item instance. + */ + $implicit: any; + }): TemplateRef<{ $implicit: any }>; + /** + * Custom template of thumbnail. + * @param {Object} context - item data. + */ + thumbnail(context: { + /** + * Item instance. + */ + $implicit: any; + }): TemplateRef<{ $implicit: any }>; + /** + * Custom template of item. + * @param {Object} context - item data. + */ + item(context: { + /** + * Item instance. + */ + $implicit: any; + }): TemplateRef<{ $implicit: any }>; +} diff --git a/src/app/components/inputicon/inputicon.ts b/src/app/components/inputicon/inputicon.ts new file mode 100755 index 00000000000..4e3592db8db --- /dev/null +++ b/src/app/components/inputicon/inputicon.ts @@ -0,0 +1,30 @@ +import { CommonModule } from '@angular/common'; +import { Component, NgModule } from '@angular/core'; + +import { SharedModule } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; +import { AngleDownIcon } from 'primeng/icons/angledown'; +import { AngleUpIcon } from 'primeng/icons/angleup'; +import { TimesIcon } from 'primeng/icons/times'; +import { InputTextModule } from 'primeng/inputtext'; + +/** + * IconField wraps an input and an icon. + * @group Components + */ +@Component({ + selector: 'p-inputIcon', + template: ` `, + + host: { + class: 'p-element' + } +}) +export class InputIcon {} + +@NgModule({ + imports: [CommonModule, InputTextModule, ButtonModule, TimesIcon, AngleUpIcon, AngleDownIcon], + exports: [InputIcon, SharedModule], + declarations: [InputIcon] +}) +export class InputIconModule {} diff --git a/src/app/components/inputicon/ng-package.json b/src/app/components/inputicon/ng-package.json new file mode 100644 index 00000000000..ab5467eb7e4 --- /dev/null +++ b/src/app/components/inputicon/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts" + } + } \ No newline at end of file diff --git a/src/app/components/inputicon/public_api.ts b/src/app/components/inputicon/public_api.ts new file mode 100644 index 00000000000..3bebb60f844 --- /dev/null +++ b/src/app/components/inputicon/public_api.ts @@ -0,0 +1,2 @@ +export * from './galleria'; +export * from './galleria.interface'; diff --git a/src/app/showcase/doc/iconfield/basicdoc.ts b/src/app/showcase/doc/iconfield/basicdoc.ts new file mode 100644 index 00000000000..56bc56c809f --- /dev/null +++ b/src/app/showcase/doc/iconfield/basicdoc.ts @@ -0,0 +1,63 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'basic-doc', + template: ` + +

+ A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property that the default + value is right and also left option is available. +

+ + + + + + + + + + + + + + + ` +}) +export class BasicDoc { + value: string | undefined; + + code: Code = { + basic: ` + + View Content + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + +`, + html: ` +
+ + + View Content + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + +
`, + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'iconField-basic-demo', + templateUrl: './iconField-basic-demo.html' +}) +export class IconFieldBasicDemo {}` + }; +} diff --git a/src/app/showcase/doc/iconfield/iconfielddoc.module.ts b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts new file mode 100644 index 00000000000..ebe93c75e6c --- /dev/null +++ b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts @@ -0,0 +1,18 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { InputTextModule } from 'primeng/inputtext'; +import { AppDocModule } from '../../layout/doc/app.doc.module'; +import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { BasicDoc } from './basicdoc'; +import { ImportDoc } from './importdoc'; +import { IconFieldModule } from 'src/app/components/iconfield/iconfield'; +import { InputIconModule } from 'src/app/components/inputicon/inputicon'; +import { FormsModule } from '@angular/forms'; + +@NgModule({ + imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, InputTextModule, IconFieldModule, InputIconModule, FormsModule], + declarations: [BasicDoc, ImportDoc], + exports: [AppDocModule] +}) +export class IconFieldDocModule {} diff --git a/src/app/showcase/doc/iconfield/importdoc.ts b/src/app/showcase/doc/iconfield/importdoc.ts new file mode 100644 index 00000000000..ee004cf1b80 --- /dev/null +++ b/src/app/showcase/doc/iconfield/importdoc.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'import-doc', + template: ` ` +}) +export class ImportDoc { + code: Code = { + typescript: `import { IconField } from 'primeng/iconfield';` + }; +} diff --git a/src/app/showcase/layout/app.routes.ts b/src/app/showcase/layout/app.routes.ts index 073f7c86dc0..64a2550b1c9 100644 --- a/src/app/showcase/layout/app.routes.ts +++ b/src/app/showcase/layout/app.routes.ts @@ -47,6 +47,7 @@ export const routes: Routes = [ { path: 'dynamicdialog', loadChildren: () => import('../pages/dynamicdialog/dynamicdialogdemo.module').then((m) => m.DynamicDialogDemoModule) }, { path: 'dragdrop', loadChildren: () => import('../pages/dragdrop/dragdropdemo.module').then((m) => m.DragDropDemoModule) }, { path: 'dropdown', loadChildren: () => import('../pages/dropdown/dropdowndemo.module').then((m) => m.DropdownDemoModule) }, + { path: 'iconfield', loadChildren: () => import('../pages/iconfield/iconfielddemo.module').then((m) => m.IconFieldDemoModule) }, { path: 'editor', loadChildren: () => import('../pages/editor/editordemo.module').then((m) => m.EditorDemoModule) }, { path: 'fieldset', loadChildren: () => import('../pages/fieldset/fieldsetdemo.module').then((m) => m.FieldsetDemoModule) }, { path: 'fileupload', loadChildren: () => import('../pages/fileupload/fileuploaddemo.module').then((m) => m.FileUploadDemoModule) }, diff --git a/src/app/showcase/pages/iconfield/iconfielddemo-routing.module.ts b/src/app/showcase/pages/iconfield/iconfielddemo-routing.module.ts new file mode 100755 index 00000000000..0571c92f0e3 --- /dev/null +++ b/src/app/showcase/pages/iconfield/iconfielddemo-routing.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { IconFieldDemo } from './iconfielddemo'; + + +@NgModule({ + imports: [RouterModule.forChild([{ path: '', component: IconFieldDemo }])], + exports: [RouterModule] +}) +export class IconFieldDemoRoutingModule {} diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.html b/src/app/showcase/pages/iconfield/iconfielddemo.html new file mode 100755 index 00000000000..79d9b3aa903 --- /dev/null +++ b/src/app/showcase/pages/iconfield/iconfielddemo.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.module.ts b/src/app/showcase/pages/iconfield/iconfielddemo.module.ts new file mode 100755 index 00000000000..2caf9274ca2 --- /dev/null +++ b/src/app/showcase/pages/iconfield/iconfielddemo.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { IconFieldDemo } from './iconfielddemo'; +import { IconFieldDocModule } from '../../doc/iconfield/iconfielddoc.module'; +import { IconFieldDemoRoutingModule } from './iconfielddemo-routing.module'; + + +@NgModule({ + imports: [CommonModule, IconFieldDocModule, IconFieldDemoRoutingModule], + declarations: [IconFieldDemo] +}) +export class IconFieldDemoModule {} diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.scss b/src/app/showcase/pages/iconfield/iconfielddemo.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.ts b/src/app/showcase/pages/iconfield/iconfielddemo.ts new file mode 100755 index 00000000000..f948672fcd8 --- /dev/null +++ b/src/app/showcase/pages/iconfield/iconfielddemo.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { BasicDoc } from '../../doc/iconfield/basicdoc'; +import { ImportDoc } from '../../doc/iconfield/importdoc'; + +@Component({ + templateUrl: './iconfielddemo.html', + styleUrls: ['./iconfielddemo.scss'] +}) +export class IconFieldDemo { + docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'basic', + label: 'Basic', + component: BasicDoc + }, + + ]; +} diff --git a/src/assets/showcase/data/menu.json b/src/assets/showcase/data/menu.json index 5264d08626b..058a861d382 100644 --- a/src/assets/showcase/data/menu.json +++ b/src/assets/showcase/data/menu.json @@ -57,6 +57,10 @@ "name": "Editor", "routerLink": "/editor" }, + { + "name": "IconField", + "routerLink": "/iconfield" + }, { "name": "InputGroup", "routerLink": "/inputgroup" From 2d556371cc8a85820beb2234c8cf98ad7524ace0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 22 Feb 2024 11:51:42 +0300 Subject: [PATCH 2/4] refactor --- src/app/components/iconfield/iconfield.ts | 34 ++------------- src/app/components/iconfield/public_api.ts | 4 +- src/app/components/inputicon/inputicon.ts | 11 +---- src/app/components/inputicon/public_api.ts | 3 +- .../doc/iconfield/accessibilitydoc.ts | 13 ++++++ src/app/showcase/doc/iconfield/basicdoc.ts | 42 +++++++------------ .../doc/iconfield/iconfielddoc.module.ts | 3 +- .../showcase/pages/iconfield/iconfielddemo.ts | 6 +++ 8 files changed, 44 insertions(+), 72 deletions(-) create mode 100644 src/app/showcase/doc/iconfield/accessibilitydoc.ts diff --git a/src/app/components/iconfield/iconfield.ts b/src/app/components/iconfield/iconfield.ts index 9fb99809d4c..06ee8c77f47 100755 --- a/src/app/components/iconfield/iconfield.ts +++ b/src/app/components/iconfield/iconfield.ts @@ -1,34 +1,12 @@ -import { CommonModule, DOCUMENT } from '@angular/common'; +import { CommonModule } from '@angular/common'; import { - AfterContentInit, - ChangeDetectionStrategy, - ChangeDetectorRef, Component, - ContentChildren, - ElementRef, - EventEmitter, - Inject, - Injector, Input, NgModule, - OnChanges, - OnInit, - Output, - QueryList, - SimpleChanges, - TemplateRef, - ViewChild, - ViewEncapsulation, - forwardRef } from '@angular/core'; -import { PrimeTemplate, SharedModule } from 'primeng/api'; -import { ButtonModule } from 'primeng/button'; -import { DomHandler } from 'primeng/dom'; -import { AngleDownIcon } from 'primeng/icons/angledown'; -import { AngleUpIcon } from 'primeng/icons/angleup'; -import { TimesIcon } from 'primeng/icons/times'; -import { InputTextModule } from 'primeng/inputtext'; +import { SharedModule } from 'primeng/api'; + /** * IconField wraps an input and an icon. @@ -43,15 +21,11 @@ import { InputTextModule } from 'primeng/inputtext'; } }) export class IconField { - /** - * Whether to display the component on fullscreen. - * @group Props - */ @Input() iconPosition: string | undefined; } @NgModule({ - imports: [CommonModule, InputTextModule, ButtonModule, TimesIcon, AngleUpIcon, AngleDownIcon], + imports: [CommonModule], exports: [IconField, SharedModule], declarations: [IconField] }) diff --git a/src/app/components/iconfield/public_api.ts b/src/app/components/iconfield/public_api.ts index 3bebb60f844..05de3a12fe6 100644 --- a/src/app/components/iconfield/public_api.ts +++ b/src/app/components/iconfield/public_api.ts @@ -1,2 +1,2 @@ -export * from './galleria'; -export * from './galleria.interface'; +export * from './iconfield'; + diff --git a/src/app/components/inputicon/inputicon.ts b/src/app/components/inputicon/inputicon.ts index 4e3592db8db..b181f0bf602 100755 --- a/src/app/components/inputicon/inputicon.ts +++ b/src/app/components/inputicon/inputicon.ts @@ -2,16 +2,7 @@ import { CommonModule } from '@angular/common'; import { Component, NgModule } from '@angular/core'; import { SharedModule } from 'primeng/api'; -import { ButtonModule } from 'primeng/button'; -import { AngleDownIcon } from 'primeng/icons/angledown'; -import { AngleUpIcon } from 'primeng/icons/angleup'; -import { TimesIcon } from 'primeng/icons/times'; -import { InputTextModule } from 'primeng/inputtext'; -/** - * IconField wraps an input and an icon. - * @group Components - */ @Component({ selector: 'p-inputIcon', template: ` `, @@ -23,7 +14,7 @@ import { InputTextModule } from 'primeng/inputtext'; export class InputIcon {} @NgModule({ - imports: [CommonModule, InputTextModule, ButtonModule, TimesIcon, AngleUpIcon, AngleDownIcon], + imports: [CommonModule], exports: [InputIcon, SharedModule], declarations: [InputIcon] }) diff --git a/src/app/components/inputicon/public_api.ts b/src/app/components/inputicon/public_api.ts index 3bebb60f844..ca6c47fe6fb 100644 --- a/src/app/components/inputicon/public_api.ts +++ b/src/app/components/inputicon/public_api.ts @@ -1,2 +1 @@ -export * from './galleria'; -export * from './galleria.interface'; +export * from './inputicon'; diff --git a/src/app/showcase/doc/iconfield/accessibilitydoc.ts b/src/app/showcase/doc/iconfield/accessibilitydoc.ts new file mode 100644 index 00000000000..2b0a0694488 --- /dev/null +++ b/src/app/showcase/doc/iconfield/accessibilitydoc.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'accessibility-doc', + template: ` +

Screen Reader

+

IconField and InputIcon does not require any roles and attributes.

+ +

Keyboard Support

+

Components does not include any interactive elements.

+ ` +}) +export class AccessibilityDoc {} diff --git a/src/app/showcase/doc/iconfield/basicdoc.ts b/src/app/showcase/doc/iconfield/basicdoc.ts index 56bc56c809f..619ad34eb79 100644 --- a/src/app/showcase/doc/iconfield/basicdoc.ts +++ b/src/app/showcase/doc/iconfield/basicdoc.ts @@ -10,18 +10,14 @@ import { Code } from '../../domain/code'; value is right and also left option is available.

- +
- - - - - +
` }) @@ -29,27 +25,19 @@ export class BasicDoc { value: string | undefined; code: Code = { - basic: ` - - View Content - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - -`, - html: ` -
- - - View Content - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - + basic: ` + + + + +`, + html: `
+ + + + + +
`, typescript: ` import { Component } from '@angular/core'; diff --git a/src/app/showcase/doc/iconfield/iconfielddoc.module.ts b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts index ebe93c75e6c..2400e42628a 100644 --- a/src/app/showcase/doc/iconfield/iconfielddoc.module.ts +++ b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts @@ -9,10 +9,11 @@ import { ImportDoc } from './importdoc'; import { IconFieldModule } from 'src/app/components/iconfield/iconfield'; import { InputIconModule } from 'src/app/components/inputicon/inputicon'; import { FormsModule } from '@angular/forms'; +import { AccessibilityDoc } from './accessibilitydoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, InputTextModule, IconFieldModule, InputIconModule, FormsModule], - declarations: [BasicDoc, ImportDoc], + declarations: [BasicDoc, ImportDoc, AccessibilityDoc], exports: [AppDocModule] }) export class IconFieldDocModule {} diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.ts b/src/app/showcase/pages/iconfield/iconfielddemo.ts index f948672fcd8..c729f4d0a87 100755 --- a/src/app/showcase/pages/iconfield/iconfielddemo.ts +++ b/src/app/showcase/pages/iconfield/iconfielddemo.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; import { BasicDoc } from '../../doc/iconfield/basicdoc'; import { ImportDoc } from '../../doc/iconfield/importdoc'; +import { AccessibilityDoc } from '../../doc/iconfield/accessibilitydoc'; @Component({ templateUrl: './iconfielddemo.html', @@ -18,6 +19,11 @@ export class IconFieldDemo { label: 'Basic', component: BasicDoc }, + { + id: 'accessibility', + label: 'Accessibility', + component: AccessibilityDoc + }, ]; } From 7ff9be4c6f3537242e16ab83a932e7ea039ac855 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Fri, 23 Feb 2024 11:43:31 +0300 Subject: [PATCH 3/4] iconfield api docs added --- src/app/components/iconfield/iconfield.css | 276 ------------------ .../iconfield/iconfield.interface.ts | 89 ------ src/app/components/iconfield/iconfield.ts | 13 +- src/app/showcase/doc/apidoc/index.json | 22 +- .../pages/iconfield/iconfielddemo.html | 2 +- 5 files changed, 28 insertions(+), 374 deletions(-) delete mode 100755 src/app/components/iconfield/iconfield.css delete mode 100644 src/app/components/iconfield/iconfield.interface.ts diff --git a/src/app/components/iconfield/iconfield.css b/src/app/components/iconfield/iconfield.css deleted file mode 100755 index c996776c864..00000000000 --- a/src/app/components/iconfield/iconfield.css +++ /dev/null @@ -1,276 +0,0 @@ -@layer primeng { - .p-galleria-content { - display: flex; - flex-direction: column; - } - - .p-galleria-item-wrapper { - display: flex; - flex-direction: column; - position: relative; - } - - .p-galleria-item-container { - position: relative; - display: flex; - height: 100%; - } - - .p-galleria-item-nav { - position: absolute; - top: 50%; - margin-top: -0.5rem; - display: inline-flex; - justify-content: center; - align-items: center; - overflow: hidden; - } - - .p-galleria-item-prev { - left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .p-galleria-item-next { - right: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .p-galleria-item { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; - } - - .p-galleria-item-nav-onhover .p-galleria-item-nav { - pointer-events: none; - opacity: 0; - transition: opacity 0.2s ease-in-out; - } - - .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { - pointer-events: all; - opacity: 1; - } - - .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { - pointer-events: none; - } - - .p-galleria-caption { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - } - - /* Thumbnails */ - .p-galleria-thumbnail-wrapper { - display: flex; - flex-direction: column; - overflow: auto; - flex-shrink: 0; - } - - .p-galleria-thumbnail-prev, - .p-galleria-thumbnail-next { - align-self: center; - flex: 0 0 auto; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - position: relative; - } - - .p-galleria-thumbnail-prev span, - .p-galleria-thumbnail-next span { - display: flex; - justify-content: center; - align-items: center; - } - - .p-galleria-thumbnail-container { - display: flex; - flex-direction: row; - } - - .p-galleria-thumbnail-items-container { - overflow: hidden; - width: 100%; - } - - .p-galleria-thumbnail-items { - display: flex; - } - - .p-galleria-thumbnail-item { - overflow: auto; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: 0.5; - } - - .p-galleria-thumbnail-item:hover { - opacity: 1; - transition: opacity 0.3s; - } - - .p-galleria-thumbnail-item-current { - opacity: 1; - } - - /* Positions */ - /* Thumbnails */ - .p-galleria-thumbnails-left .p-galleria-content, - .p-galleria-thumbnails-right .p-galleria-content { - flex-direction: row; - } - - .p-galleria-thumbnails-left .p-galleria-item-wrapper, - .p-galleria-thumbnails-right .p-galleria-item-wrapper { - flex-direction: row; - } - - .p-galleria-thumbnails-left p-galleriaitem, - .p-galleria-thumbnails-top p-galleriaitem { - order: 2; - } - - .p-galleria-thumbnails-left p-galleriathumbnails, - .p-galleria-thumbnails-top p-galleriathumbnails { - order: 1; - } - - .p-galleria-thumbnails-left .p-galleria-thumbnail-container, - .p-galleria-thumbnails-right .p-galleria-thumbnail-container { - flex-direction: column; - flex-grow: 1; - } - - .p-galleria-thumbnails-left .p-galleria-thumbnail-items, - .p-galleria-thumbnails-right .p-galleria-thumbnail-items { - flex-direction: column; - height: 100%; - } - .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, - .p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper { - height: 100%; - } - - /* Indicators */ - .p-galleria-indicators { - display: flex; - align-items: center; - justify-content: center; - } - - .p-galleria-indicator > button { - display: inline-flex; - align-items: center; - } - - .p-galleria-indicators-left .p-galleria-item-wrapper, - .p-galleria-indicators-right .p-galleria-item-wrapper { - flex-direction: row; - align-items: center; - } - - .p-galleria-indicators-left .p-galleria-item-container, - .p-galleria-indicators-top .p-galleria-item-container { - order: 2; - } - - .p-galleria-indicators-left .p-galleria-indicators, - .p-galleria-indicators-top .p-galleria-indicators { - order: 1; - } - - .p-galleria-indicators-left .p-galleria-indicators, - .p-galleria-indicators-right .p-galleria-indicators { - flex-direction: column; - } - - .p-galleria-indicator-onitem .p-galleria-indicators { - position: absolute; - display: flex; - z-index: 1; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { - top: 0; - left: 0; - width: 100%; - align-items: flex-start; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { - right: 0; - top: 0; - height: 100%; - align-items: flex-end; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { - bottom: 0; - left: 0; - width: 100%; - align-items: flex-end; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { - left: 0; - top: 0; - height: 100%; - align-items: flex-start; - } - - /* FullScreen */ - .p-galleria-mask { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - transition-property: background-color; - } - - .p-galleria-close { - position: absolute; - top: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - } - - .p-galleria-mask .p-galleria-item-nav { - position: fixed; - top: 50%; - margin-top: -0.5rem; - } - - .p-galleria-mask.p-galleria-mask-leave { - background-color: transparent; - } - - /* Keyboard Support */ - .p-items-hidden .p-galleria-thumbnail-item { - visibility: hidden; - } - - .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { - visibility: visible; - } -} diff --git a/src/app/components/iconfield/iconfield.interface.ts b/src/app/components/iconfield/iconfield.interface.ts deleted file mode 100644 index 328a421abdd..00000000000 --- a/src/app/components/iconfield/iconfield.interface.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { TemplateRef } from '@angular/core'; -/** - * Responsive options of the component. - * @group Interface - */ -export interface GalleriaResponsiveOptions { - /** - * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...} - */ - breakpoint: string; - /** - * The number of visible items on breakpoint. - */ - numVisible: number; -} -/** - * Defines valid templates in Galleria. - * @group Templates - */ -export interface GalleriaTemplates { - /** - * Custom template of header. - */ - header(): TemplateRef; - /** - * Custom template of footer. - */ - footer(): TemplateRef; - /** - * Custom template of indicator. - * @param {Object} context - indicator data. - */ - indicator(context: { - /** - * Index of the item. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; - /** - * Custom template of closeicon. - */ - closeicon(): TemplateRef; - /** - * Custom template of itemnexticon. - */ - itemnexticon(): TemplateRef; - /** - * Custom template of itempreviousicon. - */ - itempreviousicon(): TemplateRef; - /** - * Custom template of previousthumbnailicon. - */ - previousthumbnailicon(): TemplateRef; - /** - * Custom template of nextthumbnailicon. - */ - nextthumbnailicon(): TemplateRef; - /** - * Custom template of caption. - * @param {Object} context - item data. - */ - caption(context: { - /** - * Item instance. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; - /** - * Custom template of thumbnail. - * @param {Object} context - item data. - */ - thumbnail(context: { - /** - * Item instance. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; - /** - * Custom template of item. - * @param {Object} context - item data. - */ - item(context: { - /** - * Item instance. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; -} diff --git a/src/app/components/iconfield/iconfield.ts b/src/app/components/iconfield/iconfield.ts index 06ee8c77f47..31b1993f45a 100755 --- a/src/app/components/iconfield/iconfield.ts +++ b/src/app/components/iconfield/iconfield.ts @@ -1,13 +1,8 @@ import { CommonModule } from '@angular/common'; -import { - Component, - Input, - NgModule, -} from '@angular/core'; +import { Component, Input, NgModule } from '@angular/core'; import { SharedModule } from 'primeng/api'; - /** * IconField wraps an input and an icon. * @group Components @@ -21,7 +16,11 @@ import { SharedModule } from 'primeng/api'; } }) export class IconField { - @Input() iconPosition: string | undefined; + /** + * Position of the icon. + * @group Props + */ + @Input() iconPosition: 'right' | 'left' = 'right'; } @NgModule({ diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index 55e096e9ea3..14344010e3f 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -10899,6 +10899,26 @@ } } }, + "iconfield": { + "components": { + "IconField": { + "description": "IconField wraps an input and an icon.", + "props": { + "description": "Defines the input properties of the component.", + "values": [ + { + "name": "iconPosition", + "optional": false, + "readonly": false, + "type": "\"left\" | \"right\"", + "description": "Position of the icon", + "default" :"right" + } + ] + } + } + } + }, "fieldset": { "components": { "Fieldset": { @@ -27736,4 +27756,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.html b/src/app/showcase/pages/iconfield/iconfielddemo.html index 79d9b3aa903..d748a139bed 100755 --- a/src/app/showcase/pages/iconfield/iconfielddemo.html +++ b/src/app/showcase/pages/iconfield/iconfielddemo.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From e642a7324c871f403ba713c79aa43773a954147e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 28 Feb 2024 13:11:25 +0300 Subject: [PATCH 4/4] Refactor --- src/app/components/iconfield/iconfield.css | 5 + src/app/components/iconfield/iconfield.ts | 20 +- src/app/components/inputicon/inputicon.css | 274 +----------------- .../inputicon/inputicon.interface.ts | 89 ------ src/app/components/inputicon/inputicon.ts | 24 +- src/app/showcase/doc/apidoc/index.json | 96 ++++-- src/app/showcase/doc/iconfield/basicdoc.ts | 28 +- .../pages/iconfield/iconfielddemo.html | 2 +- .../components/themes/arya-blue/theme.css | 16 + .../components/themes/arya-green/theme.css | 16 + .../components/themes/arya-orange/theme.css | 16 + .../components/themes/arya-purple/theme.css | 16 + .../themes/bootstrap4-dark-blue/theme.css | 16 + .../themes/bootstrap4-dark-purple/theme.css | 16 + .../themes/bootstrap4-light-blue/theme.css | 16 + .../themes/bootstrap4-light-purple/theme.css | 16 + .../components/themes/fluent-light/theme.css | 16 + .../themes/lara-dark-blue/theme.css | 16 + .../themes/lara-dark-indigo/theme.css | 16 + .../themes/lara-dark-purple/theme.css | 16 + .../themes/lara-dark-teal/theme.css | 16 + .../themes/lara-light-blue/theme.css | 16 + .../themes/lara-light-indigo/theme.css | 16 + .../themes/lara-light-purple/theme.css | 16 + .../themes/lara-light-teal/theme.css | 16 + .../components/themes/luna-amber/theme.css | 16 + .../components/themes/luna-blue/theme.css | 16 + .../components/themes/luna-green/theme.css | 16 + .../components/themes/luna-pink/theme.css | 16 + .../themes/md-dark-deeppurple/theme.css | 16 + .../themes/md-dark-indigo/theme.css | 16 + .../themes/md-light-deeppurple/theme.css | 16 + .../themes/md-light-indigo/theme.css | 16 + .../themes/mdc-dark-deeppurple/theme.css | 16 + .../themes/mdc-dark-indigo/theme.css | 16 + .../themes/mdc-light-deeppurple/theme.css | 16 + .../themes/mdc-light-indigo/theme.css | 16 + src/assets/components/themes/mira/theme.css | 16 + src/assets/components/themes/nano/theme.css | 16 + .../components/themes/nova-accent/theme.css | 16 + .../components/themes/nova-alt/theme.css | 16 + src/assets/components/themes/nova/theme.css | 16 + src/assets/components/themes/rhea/theme.css | 16 + .../components/themes/saga-blue/theme.css | 16 + .../components/themes/saga-green/theme.css | 16 + .../components/themes/saga-orange/theme.css | 16 + .../components/themes/saga-purple/theme.css | 16 + .../components/themes/soho-dark/theme.css | 16 + .../components/themes/soho-light/theme.css | 16 + .../themes/tailwind-light/theme.css | 16 + .../components/themes/vela-blue/theme.css | 16 + .../components/themes/vela-green/theme.css | 16 + .../components/themes/vela-orange/theme.css | 16 + .../components/themes/vela-purple/theme.css | 16 + .../components/themes/viva-dark/theme.css | 16 + .../components/themes/viva-light/theme.css | 16 + 56 files changed, 883 insertions(+), 423 deletions(-) create mode 100644 src/app/components/iconfield/iconfield.css delete mode 100644 src/app/components/inputicon/inputicon.interface.ts diff --git a/src/app/components/iconfield/iconfield.css b/src/app/components/iconfield/iconfield.css new file mode 100644 index 00000000000..7efe09a8a15 --- /dev/null +++ b/src/app/components/iconfield/iconfield.css @@ -0,0 +1,5 @@ +@layer primeng { + .p-icon-field { + position: relative; + } +} \ No newline at end of file diff --git a/src/app/components/iconfield/iconfield.ts b/src/app/components/iconfield/iconfield.ts index 31b1993f45a..44ce8e9a958 100755 --- a/src/app/components/iconfield/iconfield.ts +++ b/src/app/components/iconfield/iconfield.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component, Input, NgModule } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core'; import { SharedModule } from 'primeng/api'; @@ -9,18 +9,24 @@ import { SharedModule } from 'primeng/api'; */ @Component({ selector: 'p-iconField', - template: ` `, - - host: { - class: 'p-element' - } + template: ` `, + styleUrl: './iconfield.css', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush }) export class IconField { /** * Position of the icon. * @group Props */ - @Input() iconPosition: 'right' | 'left' = 'right'; + @Input() iconPosition: 'right' | 'left' = 'left'; + + get containerClass() { + return { + 'p-icon-field-left': this.iconPosition === 'left', + 'p-icon-field-right': this.iconPosition === 'right' + }; + } } @NgModule({ diff --git a/src/app/components/inputicon/inputicon.css b/src/app/components/inputicon/inputicon.css index c996776c864..0e8f3cadbaf 100755 --- a/src/app/components/inputicon/inputicon.css +++ b/src/app/components/inputicon/inputicon.css @@ -1,276 +1,6 @@ @layer primeng { - .p-galleria-content { - display: flex; - flex-direction: column; - } - - .p-galleria-item-wrapper { - display: flex; - flex-direction: column; - position: relative; - } - - .p-galleria-item-container { - position: relative; - display: flex; - height: 100%; - } - - .p-galleria-item-nav { - position: absolute; - top: 50%; - margin-top: -0.5rem; - display: inline-flex; - justify-content: center; - align-items: center; - overflow: hidden; - } - - .p-galleria-item-prev { - left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .p-galleria-item-next { - right: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .p-galleria-item { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; - } - - .p-galleria-item-nav-onhover .p-galleria-item-nav { - pointer-events: none; - opacity: 0; - transition: opacity 0.2s ease-in-out; - } - - .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { - pointer-events: all; - opacity: 1; - } - - .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { - pointer-events: none; - } - - .p-galleria-caption { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - } - - /* Thumbnails */ - .p-galleria-thumbnail-wrapper { - display: flex; - flex-direction: column; - overflow: auto; - flex-shrink: 0; - } - - .p-galleria-thumbnail-prev, - .p-galleria-thumbnail-next { - align-self: center; - flex: 0 0 auto; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - position: relative; - } - - .p-galleria-thumbnail-prev span, - .p-galleria-thumbnail-next span { - display: flex; - justify-content: center; - align-items: center; - } - - .p-galleria-thumbnail-container { - display: flex; - flex-direction: row; - } - - .p-galleria-thumbnail-items-container { - overflow: hidden; - width: 100%; - } - - .p-galleria-thumbnail-items { - display: flex; - } - - .p-galleria-thumbnail-item { - overflow: auto; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: 0.5; - } - - .p-galleria-thumbnail-item:hover { - opacity: 1; - transition: opacity 0.3s; - } - - .p-galleria-thumbnail-item-current { - opacity: 1; - } - - /* Positions */ - /* Thumbnails */ - .p-galleria-thumbnails-left .p-galleria-content, - .p-galleria-thumbnails-right .p-galleria-content { - flex-direction: row; - } - - .p-galleria-thumbnails-left .p-galleria-item-wrapper, - .p-galleria-thumbnails-right .p-galleria-item-wrapper { - flex-direction: row; - } - - .p-galleria-thumbnails-left p-galleriaitem, - .p-galleria-thumbnails-top p-galleriaitem { - order: 2; - } - - .p-galleria-thumbnails-left p-galleriathumbnails, - .p-galleria-thumbnails-top p-galleriathumbnails { - order: 1; - } - - .p-galleria-thumbnails-left .p-galleria-thumbnail-container, - .p-galleria-thumbnails-right .p-galleria-thumbnail-container { - flex-direction: column; - flex-grow: 1; - } - - .p-galleria-thumbnails-left .p-galleria-thumbnail-items, - .p-galleria-thumbnails-right .p-galleria-thumbnail-items { - flex-direction: column; - height: 100%; - } - .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, - .p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper { - height: 100%; - } - - /* Indicators */ - .p-galleria-indicators { - display: flex; - align-items: center; - justify-content: center; - } - - .p-galleria-indicator > button { - display: inline-flex; - align-items: center; - } - - .p-galleria-indicators-left .p-galleria-item-wrapper, - .p-galleria-indicators-right .p-galleria-item-wrapper { - flex-direction: row; - align-items: center; - } - - .p-galleria-indicators-left .p-galleria-item-container, - .p-galleria-indicators-top .p-galleria-item-container { - order: 2; - } - - .p-galleria-indicators-left .p-galleria-indicators, - .p-galleria-indicators-top .p-galleria-indicators { - order: 1; - } - - .p-galleria-indicators-left .p-galleria-indicators, - .p-galleria-indicators-right .p-galleria-indicators { - flex-direction: column; - } - - .p-galleria-indicator-onitem .p-galleria-indicators { - position: absolute; - display: flex; - z-index: 1; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { - top: 0; - left: 0; - width: 100%; - align-items: flex-start; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { - right: 0; - top: 0; - height: 100%; - align-items: flex-end; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { - bottom: 0; - left: 0; - width: 100%; - align-items: flex-end; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { - left: 0; - top: 0; - height: 100%; - align-items: flex-start; - } - - /* FullScreen */ - .p-galleria-mask { - position: fixed; - top: 0; - left: 0; + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - transition-property: background-color; - } - - .p-galleria-close { - position: absolute; - top: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - } - - .p-galleria-mask .p-galleria-item-nav { - position: fixed; - top: 50%; - margin-top: -0.5rem; - } - - .p-galleria-mask.p-galleria-mask-leave { - background-color: transparent; - } - - /* Keyboard Support */ - .p-items-hidden .p-galleria-thumbnail-item { - visibility: hidden; - } - - .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { - visibility: visible; } } diff --git a/src/app/components/inputicon/inputicon.interface.ts b/src/app/components/inputicon/inputicon.interface.ts deleted file mode 100644 index 328a421abdd..00000000000 --- a/src/app/components/inputicon/inputicon.interface.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { TemplateRef } from '@angular/core'; -/** - * Responsive options of the component. - * @group Interface - */ -export interface GalleriaResponsiveOptions { - /** - * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...} - */ - breakpoint: string; - /** - * The number of visible items on breakpoint. - */ - numVisible: number; -} -/** - * Defines valid templates in Galleria. - * @group Templates - */ -export interface GalleriaTemplates { - /** - * Custom template of header. - */ - header(): TemplateRef; - /** - * Custom template of footer. - */ - footer(): TemplateRef; - /** - * Custom template of indicator. - * @param {Object} context - indicator data. - */ - indicator(context: { - /** - * Index of the item. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; - /** - * Custom template of closeicon. - */ - closeicon(): TemplateRef; - /** - * Custom template of itemnexticon. - */ - itemnexticon(): TemplateRef; - /** - * Custom template of itempreviousicon. - */ - itempreviousicon(): TemplateRef; - /** - * Custom template of previousthumbnailicon. - */ - previousthumbnailicon(): TemplateRef; - /** - * Custom template of nextthumbnailicon. - */ - nextthumbnailicon(): TemplateRef; - /** - * Custom template of caption. - * @param {Object} context - item data. - */ - caption(context: { - /** - * Item instance. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; - /** - * Custom template of thumbnail. - * @param {Object} context - item data. - */ - thumbnail(context: { - /** - * Item instance. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; - /** - * Custom template of item. - * @param {Object} context - item data. - */ - item(context: { - /** - * Item instance. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; -} diff --git a/src/app/components/inputicon/inputicon.ts b/src/app/components/inputicon/inputicon.ts index b181f0bf602..3c4a9b32b9d 100755 --- a/src/app/components/inputicon/inputicon.ts +++ b/src/app/components/inputicon/inputicon.ts @@ -1,17 +1,25 @@ import { CommonModule } from '@angular/common'; -import { Component, NgModule } from '@angular/core'; - +import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core'; import { SharedModule } from 'primeng/api'; +/** + * InputIcon displays an icon. + * @group Components + */ @Component({ selector: 'p-inputIcon', - template: ` `, - - host: { - class: 'p-element' - } + template: ``, + styleUrl: './inputicon.css', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush }) -export class InputIcon {} +export class InputIcon { + /** + * Style class of the element. + * @group Props + */ + @Input() styleClass: string | undefined; +} @NgModule({ imports: [CommonModule], diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index 14344010e3f..59a53e54bf9 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -3102,6 +3102,12 @@ "optional": true, "readonly": false, "type": "string" + }, + { + "name": "listLabel", + "optional": true, + "readonly": false, + "type": "string" } ] } @@ -3761,7 +3767,7 @@ "optional": false, "readonly": false, "type": "boolean", - "default": "false", + "default": "true", "description": "Whether to show the empty message or not." }, { @@ -4446,7 +4452,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "\"success\" | \"warning\" | \"info\" | \"danger\"", + "type": "\"success\" | \"info\" | \"warning\" | \"danger\"", "description": "Severity type of the badge." } ] @@ -4482,7 +4488,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "\"success\" | \"warning\" | \"info\" | \"danger\"", + "type": "\"success\" | \"info\" | \"warning\" | \"danger\"", "description": "Severity type of the badge." }, { @@ -9547,8 +9553,7 @@ "name": "placeholder", "optional": false, "readonly": false, - "type": "string", - "description": "Default text to display when no option is selected." + "type": "Signal" }, { "name": "filterPlaceholder", @@ -10019,6 +10024,16 @@ "name": "focus", "parameters": [], "description": "Applies focus." + }, + { + "name": "clear", + "parameters": [ + { + "name": "event", + "type": "Event" + } + ], + "description": "Clears the model." } ] } @@ -10899,26 +10914,6 @@ } } }, - "iconfield": { - "components": { - "IconField": { - "description": "IconField wraps an input and an icon.", - "props": { - "description": "Defines the input properties of the component.", - "values": [ - { - "name": "iconPosition", - "optional": false, - "readonly": false, - "type": "\"left\" | \"right\"", - "description": "Position of the icon", - "default" :"right" - } - ] - } - } - } - }, "fieldset": { "components": { "Fieldset": { @@ -12095,6 +12090,26 @@ } } }, + "iconfield": { + "components": { + "IconField": { + "description": "IconField wraps an input and an icon.", + "props": { + "description": "Defines the input properties of the component.", + "values": [ + { + "name": "iconPosition", + "optional": false, + "readonly": false, + "type": "\"left\" | \"right\"", + "default": "left", + "description": "Position of the icon." + } + ] + } + } + } + }, "angledoubledown": { "components": {} }, @@ -12670,6 +12685,25 @@ } } }, + "inputicon": { + "components": { + "InputIcon": { + "description": "InputIcon displays an icon.", + "props": { + "description": "Defines the input properties of the component.", + "values": [ + { + "name": "styleClass", + "optional": false, + "readonly": false, + "type": "string", + "description": "Style class of the element." + } + ] + } + } + } + }, "inputmask": { "components": { "InputMask": { @@ -15137,7 +15171,6 @@ "optional": false, "readonly": false, "type": "string", - "default": "{0} items selected", "description": "Label to display after exceeding max selected labels e.g. ({0} items selected), defaults \"ellipsis\" keyword to indicate a text-overflow." }, { @@ -15396,7 +15429,7 @@ "name": "placeholder", "optional": false, "readonly": false, - "type": "string" + "type": "Signal" }, { "name": "options", @@ -18684,6 +18717,13 @@ "type": "string", "default": "2s", "description": "Duration of the rotate animation." + }, + { + "name": "ariaLabel", + "optional": false, + "readonly": false, + "type": "string", + "description": "Used to define a aria label attribute the current element." } ] } @@ -27756,4 +27796,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/app/showcase/doc/iconfield/basicdoc.ts b/src/app/showcase/doc/iconfield/basicdoc.ts index 619ad34eb79..e3ef45ac3c6 100644 --- a/src/app/showcase/doc/iconfield/basicdoc.ts +++ b/src/app/showcase/doc/iconfield/basicdoc.ts @@ -11,33 +11,25 @@ import { Code } from '../../domain/code';

- - - - - + + +
` }) export class BasicDoc { - value: string | undefined; - code: Code = { - basic: ` - - - - + basic: ` + + `, html: `
- - - - - - + + + +
`, typescript: ` import { Component } from '@angular/core'; diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.html b/src/app/showcase/pages/iconfield/iconfielddemo.html index d748a139bed..47931d93c4a 100755 --- a/src/app/showcase/pages/iconfield/iconfielddemo.html +++ b/src/app/showcase/pages/iconfield/iconfielddemo.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index 826904c446f..61aadd4813f 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index e03fffa3598..3d798d14c92 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index 8cd8c32ab51..53bd37b0554 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index 8eceecc17ab..79e18605807 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index 2e8030b48c6..a883adb3239 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -1069,6 +1069,12 @@ border-color: #f19ea6; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index 9e574382dc0..2f31d744a89 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -1069,6 +1069,12 @@ border-color: #f19ea6; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index 9933f933730..1fccc8fbaa2 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -1069,6 +1069,12 @@ border-color: #dc3545; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #495057; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #495057; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index 18860fef36a..d48c8faed77 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -1069,6 +1069,12 @@ border-color: #dc3545; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #495057; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #495057; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index 731b7ba30d5..224e861ebf7 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -1065,6 +1065,12 @@ border-color: #a4252c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f2f1; color: #605e5c; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #605e5c; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #605e5c; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a4252c; } diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index 06e494801ad..1d1e385e502 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -1082,6 +1082,12 @@ border-color: #fca5a5; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index 6fb191d2c89..6485aa86b26 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -1082,6 +1082,12 @@ border-color: #fca5a5; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index 278966af800..896d0787ee9 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -1082,6 +1082,12 @@ border-color: #fca5a5; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 8118d1b873b..2bbd2c66490 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -1082,6 +1082,12 @@ border-color: #fca5a5; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index 2a62954fab8..7f067f10133 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -1082,6 +1082,12 @@ border-color: #e24c4c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index 2974a643020..a46ce4e78ab 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -1082,6 +1082,12 @@ border-color: #e24c4c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 8b0976b250f..4d64bb5d2d0 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -1082,6 +1082,12 @@ border-color: #e24c4c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index 359f03e5362..89806acf4a9 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -1082,6 +1082,12 @@ border-color: #e24c4c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 1e165c183e4..6ecf58877e3 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -1069,6 +1069,12 @@ border-color: #e57373; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index 0b83a4ee11a..690ca30a506 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -1069,6 +1069,12 @@ border-color: #e57373; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index ec637309407..9d63a533f6a 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -1069,6 +1069,12 @@ border-color: #e57373; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index 9f8cc241d35..b60e2379949 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -1069,6 +1069,12 @@ border-color: #e57373; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index 917acca6a2a..54a6c748921 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -1088,6 +1088,12 @@ border-color: #f44435; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1158,6 +1164,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index d3a215d5b96..129ec07972b 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -1088,6 +1088,12 @@ border-color: #f44435; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1158,6 +1164,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index 95fc4f3f7ac..78b119e9cd3 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -1088,6 +1088,12 @@ border-color: #b00020; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1158,6 +1164,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index a34f6ec02b9..1e728dff8e5 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -1088,6 +1088,12 @@ border-color: #b00020; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1158,6 +1164,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 5895ad080df..d99b0f512f2 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -1088,6 +1088,12 @@ border-color: #f44435; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1158,6 +1164,16 @@ width: 2.75rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index 113d1c42c7d..eac23eb98a5 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -1088,6 +1088,12 @@ border-color: #f44435; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1158,6 +1164,16 @@ width: 2.75rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index ed44bc5132d..3a7f9852f0f 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -1088,6 +1088,12 @@ border-color: #b00020; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1158,6 +1164,16 @@ width: 2.75rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index f0f9a852550..5334d2c8039 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -1088,6 +1088,12 @@ border-color: #b00020; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1158,6 +1164,16 @@ width: 2.75rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css index 098569d429d..9b9778cc56f 100644 --- a/src/assets/components/themes/mira/theme.css +++ b/src/assets/components/themes/mira/theme.css @@ -1091,6 +1091,12 @@ border-color: #bf616a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: #81a1c1; @@ -1161,6 +1167,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #81a1c1; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #81a1c1; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #bf616a; } diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css index a9b3c4b7abc..c1edd4c45b9 100644 --- a/src/assets/components/themes/nano/theme.css +++ b/src/assets/components/themes/nano/theme.css @@ -1065,6 +1065,12 @@ border-color: #d8222f; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #dde1e6; color: #697077; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.25rem; + color: #697077; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.25rem; + color: #697077; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #d8222f; } diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 15c76b69f7a..eb6d8831d8d 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -1065,6 +1065,12 @@ border-color: #a80000; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index a7c600cbbbe..579009d6334 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -1069,6 +1069,12 @@ border-color: #a80000; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index 9ea0568c619..3d38d4e5c01 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -1069,6 +1069,12 @@ border-color: #a80000; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index c7e7d738112..541b007dbd2 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -1065,6 +1065,12 @@ border-color: #e7a3a3; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #dbdbdb; color: #666666; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #a6a6a6; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #a6a6a6; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e7a3a3; } diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index 2778c14c019..3f688430269 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -1065,6 +1065,12 @@ border-color: #f44336; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index 05b613de6f2..8ac1594cde8 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -1065,6 +1065,12 @@ border-color: #f44336; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index 04d12a5607f..9302ff6c9ed 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -1065,6 +1065,12 @@ border-color: #f44336; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index 3c23e8fd166..5531cc7afb7 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -1065,6 +1065,12 @@ border-color: #f44336; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css index c29ee539461..f936d2eb183 100644 --- a/src/assets/components/themes/soho-dark/theme.css +++ b/src/assets/components/themes/soho-dark/theme.css @@ -1087,6 +1087,12 @@ border-color: #ff9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -1157,6 +1163,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ff9a9a; } diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css index 742464f83cf..50273159d83 100644 --- a/src/assets/components/themes/soho-light/theme.css +++ b/src/assets/components/themes/soho-light/theme.css @@ -1087,6 +1087,12 @@ border-color: #ff6767; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f6f9fc; color: #708da9; @@ -1157,6 +1163,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #708da9; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #708da9; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ff6767; } diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index 476678bf5ad..cfc3493813c 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -1101,6 +1101,12 @@ border-color: #f0a9a7; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #fafafa; color: #71717a; @@ -1171,6 +1177,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #71717a; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #71717a; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f0a9a7; } diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index 970d2e5ac47..bf354cf1ce7 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index 6c562cb81aa..e3af26b3415 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 683e53f2acc..dc654e9822d 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index 6247fddd7d9..b7503aa1723 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css index 1dd6045cb43..d158f24fac4 100644 --- a/src/assets/components/themes/viva-dark/theme.css +++ b/src/assets/components/themes/viva-dark/theme.css @@ -1095,6 +1095,12 @@ border-color: #f78c79; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1171,16 @@ width: 2.857rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f78c79; } diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css index 1e1b0a3a47a..05efd14ab13 100644 --- a/src/assets/components/themes/viva-light/theme.css +++ b/src/assets/components/themes/viva-light/theme.css @@ -1096,6 +1096,12 @@ border-color: #f88c79; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f5f5f5; color: #898989; @@ -1166,6 +1172,16 @@ width: 2.857rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #898989; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #898989; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f88c79; }