From 6e7d42bdb10a1cfef9dc386e048fc31f6b71dd38 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 10:54:42 +0300 Subject: [PATCH 01/12] Fix #13851 - Button: New props --- src/app/components/button/button.ts | 51 +++++++++++++++++++- src/app/showcase/doc/button/linkdoc.ts | 6 +-- src/app/showcase/doc/button/outlineddoc.ts | 42 ++++++++-------- src/app/showcase/doc/button/raiseddoc.ts | 42 ++++++++-------- src/app/showcase/doc/button/raisedtextdoc.ts | 45 +++++++++-------- src/app/showcase/doc/button/roundeddoc.ts | 42 ++++++++-------- src/app/showcase/doc/button/severitydoc.ts | 36 +++++++------- src/app/showcase/doc/button/sizesdoc.ts | 18 +++---- src/app/showcase/doc/button/templatedoc.ts | 6 +-- src/app/showcase/doc/button/textdoc.ts | 45 +++++++++-------- 10 files changed, 194 insertions(+), 139 deletions(-) diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts index e44c9df85d0..3237ce4087c 100755 --- a/src/app/components/button/button.ts +++ b/src/app/components/button/button.ts @@ -320,6 +320,46 @@ export class Button implements AfterContentInit { * @group Props */ @Input() loadingIcon: string | undefined; + /** + * Add a shadow to indicate elevation. + * @group Props + */ + @Input() raised: boolean = false; + /** + * Add a circular border radius to the button. + * @group Props + */ + @Input() rounded: boolean = false; + /** + * Add a textual class to the button without a background initially. + * @group Props + */ + @Input() text: boolean = false; + /** + * Add a plain textual class to the button without a background initially. + * @group Props + */ + @Input() plain: boolean = false; + /** + * Defines the style of the button. + * @group Props + */ + @Input() severity: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | string | undefined; + /** + * Add a border class without a background initially. + * @group Props + */ + @Input() outlined: boolean = false; + /** + * Add a link style to the button. + * @group Props + */ + @Input() link: boolean = false; + /** + * Defines the size of the button. + * @group Props + */ + @Input() size: 'small' | 'large' | undefined; /** * Inline style of the element. * @group Props @@ -393,7 +433,16 @@ export class Button implements AfterContentInit { 'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label, 'p-disabled': this.disabled || this.loading, 'p-button-loading': this.loading, - 'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left' + 'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left', + 'p-button-link': this.link, + [`p-button-${this.severity}`]: this.severity, + 'p-button-raised': this.raised, + 'p-button-rounded': this.rounded, + 'p-button-text': this.text, + 'p-button-outlined': this.outlined, + 'p-button-sm': this.size === 'small', + 'p-button-lg': this.size === 'large', + 'p-button-plain': this.plain }; } diff --git a/src/app/showcase/doc/button/linkdoc.ts b/src/app/showcase/doc/button/linkdoc.ts index bfcd1cb87bb..f78aad9e69c 100644 --- a/src/app/showcase/doc/button/linkdoc.ts +++ b/src/app/showcase/doc/button/linkdoc.ts @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

A button can be rendered as a link as well.

- +
` @@ -20,11 +20,11 @@ export class LinkDoc { code: Code = { basic: ` -`, +`, html: `
- +
`, typescript: ` diff --git a/src/app/showcase/doc/button/outlineddoc.ts b/src/app/showcase/doc/button/outlineddoc.ts index bd7e9b211a7..a1b03dd0ba0 100644 --- a/src/app/showcase/doc/button/outlineddoc.ts +++ b/src/app/showcase/doc/button/outlineddoc.ts @@ -8,13 +8,13 @@ import { Code } from '../../domain/code';

Outlined buttons display a border without a background initially.

- - - - - - - + + + + + + +
` @@ -26,23 +26,23 @@ export class OutlinedDoc { code: Code = { basic: ` - - - - - - -`, + + + + + + +`, html: `
- - - - - - - + + + + + + +
`, typescript: ` diff --git a/src/app/showcase/doc/button/raiseddoc.ts b/src/app/showcase/doc/button/raiseddoc.ts index a2dc8b90ecd..8b35015b4f3 100644 --- a/src/app/showcase/doc/button/raiseddoc.ts +++ b/src/app/showcase/doc/button/raiseddoc.ts @@ -8,13 +8,13 @@ import { Code } from '../../domain/code';

Raised buttons display a shadow to indicate elevation.

- - - - - - - + + + + + + +
` @@ -26,23 +26,23 @@ export class RaisedDoc { code: Code = { basic: ` - - - - - - -`, + + + + + + +`, html: `
- - - - - - - + + + + + + +
`, typescript: ` diff --git a/src/app/showcase/doc/button/raisedtextdoc.ts b/src/app/showcase/doc/button/raisedtextdoc.ts index 68419cad4e7..59312a59125 100644 --- a/src/app/showcase/doc/button/raisedtextdoc.ts +++ b/src/app/showcase/doc/button/raisedtextdoc.ts @@ -8,13 +8,14 @@ import { Code } from '../../domain/code';

Text buttons can be displayed as raised for elevation.

- - - - - - - + + + + + + + +
` @@ -26,23 +27,25 @@ export class RaisedTextDoc { code: Code = { basic: ` - - - - - - -`, + + + + + + + +`, html: `
- - - - - - - + + + + + + + +
`, typescript: ` diff --git a/src/app/showcase/doc/button/roundeddoc.ts b/src/app/showcase/doc/button/roundeddoc.ts index f951e16385a..716a03dfc42 100644 --- a/src/app/showcase/doc/button/roundeddoc.ts +++ b/src/app/showcase/doc/button/roundeddoc.ts @@ -8,13 +8,13 @@ import { Code } from '../../domain/code';

Rounded buttons have a circular border radius.

- - - - - - - + + + + + + +
` @@ -26,23 +26,23 @@ export class RoundedDoc { code: Code = { basic: ` - - - - - - -`, + + + + + + +`, html: `
- - - - - - - + + + + + + +
`, typescript: ` diff --git a/src/app/showcase/doc/button/severitydoc.ts b/src/app/showcase/doc/button/severitydoc.ts index c594945fb04..87b7ffc7995 100644 --- a/src/app/showcase/doc/button/severitydoc.ts +++ b/src/app/showcase/doc/button/severitydoc.ts @@ -9,12 +9,12 @@ import { Code } from '../../domain/code';
- - - - - - + + + + + +
` @@ -27,22 +27,22 @@ export class SeverityDoc { code: Code = { basic: ` - - - - - -`, + + + + + +`, html: `
- - - - - - + + + + + +
`, typescript: ` diff --git a/src/app/showcase/doc/button/sizesdoc.ts b/src/app/showcase/doc/button/sizesdoc.ts index 04b0fdebbf1..139bceb5a67 100644 --- a/src/app/showcase/doc/button/sizesdoc.ts +++ b/src/app/showcase/doc/button/sizesdoc.ts @@ -8,9 +8,9 @@ import { Code } from '../../domain/code';

Button provides small and large sizes as alternatives to the standard.

- - - + + +
` @@ -22,15 +22,15 @@ export class SizesDoc { code: Code = { basic: ` - - -`, + + +`, html: `
- - - + + +
`, typescript: ` diff --git a/src/app/showcase/doc/button/templatedoc.ts b/src/app/showcase/doc/button/templatedoc.ts index 66019ff6ca5..156e10e21cc 100644 --- a/src/app/showcase/doc/button/templatedoc.ts +++ b/src/app/showcase/doc/button/templatedoc.ts @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Custom content inside a button is defined as children.

- + logo PrimeNG @@ -23,14 +23,14 @@ export class TemplateDoc { code: Code = { basic: ` - + logo PrimeNG `, html: `
- + logo PrimeNG diff --git a/src/app/showcase/doc/button/textdoc.ts b/src/app/showcase/doc/button/textdoc.ts index ee2dee3daac..dca11b7d1a8 100644 --- a/src/app/showcase/doc/button/textdoc.ts +++ b/src/app/showcase/doc/button/textdoc.ts @@ -8,13 +8,14 @@ import { Code } from '../../domain/code';

Text buttons are displayed as textual elements.

- - - - - - - + + + + + + + +
` @@ -26,23 +27,25 @@ export class TextDoc { code: Code = { basic: ` - - - - - - -`, + + + + + + + +`, html: `
- - - - - - - + + + + + + + +
`, typescript: ` From c355d7d209629faf3206138b5e0ad3bc7fce52c2 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 10:57:38 +0300 Subject: [PATCH 02/12] Update api for button --- src/app/showcase/doc/apidoc/index.json | 68 ++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 3 deletions(-) diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index 9f9dc332935..dd4a218a0ac 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -2234,7 +2234,7 @@ "optional": true, "readonly": false, "type": "\"focus\" | \"hover\"", - "description": "Event to show tooltip." + "description": "Event to show the tooltip." }, { "name": "appendTo", @@ -4251,7 +4251,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "\"success\" | \"warning\" | \"danger\" | \"info\"", + "type": "\"success\" | \"warning\" | \"info\" | \"danger\"", "description": "Severity type of the badge." } ] @@ -4287,7 +4287,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "\"success\" | \"warning\" | \"danger\" | \"info\"", + "type": "\"success\" | \"warning\" | \"info\" | \"danger\"", "description": "Severity type of the badge." }, { @@ -4588,6 +4588,68 @@ "type": "string", "description": "Icon to display in loading state." }, + { + "name": "raised", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Add a shadow to indicate elevation." + }, + { + "name": "rounded", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Add a circular border radius to the button." + }, + { + "name": "text", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Add a textual class to the button without a background initially." + }, + { + "name": "plain", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Add a plain textual class to the button without a background initially." + }, + { + "name": "severity", + "optional": false, + "readonly": false, + "type": "string", + "description": "Defines the style of the button." + }, + { + "name": "outlined", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Add a border class without a background initially." + }, + { + "name": "link", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Add a link style to the button." + }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the button." + }, { "name": "style", "optional": false, From 2cf50c9e57aaed71244dd5f8b09de0fd88357c7e Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 11:00:32 +0300 Subject: [PATCH 03/12] API Doc Cosmetics --- .../app.docapitable.component.html | 39 +++++++++++++------ .../docapitable/app.docapitable.component.ts | 25 ++++++++++-- 2 files changed, 50 insertions(+), 14 deletions(-) diff --git a/src/app/showcase/layout/doc/docapitable/app.docapitable.component.html b/src/app/showcase/layout/doc/docapitable/app.docapitable.component.html index 35020ce2009..40f56e39d21 100644 --- a/src/app/showcase/layout/doc/docapitable/app.docapitable.component.html +++ b/src/app/showcase/layout/doc/docapitable/app.docapitable.component.html @@ -19,24 +19,40 @@ - - - {{entry[1] || '-'}} - {{entry[1] || '-'}} + + + {{entry[1] || '-'}} + {{entry[1] || '-'}} - - {{entry[1].name}} : - {{i !== 0 ? ' |' : ' ' }} {{value || '-'}} +
+ {{entry[1].name}} + : + {{i !== 0 + ? ' |' : ' ' }} {{value || '-'}} - {{value}} + {{value}} - +
null - {{entry[1]}} + {{ entry[1] }} @@ -46,7 +62,8 @@ - + diff --git a/src/app/showcase/layout/doc/docapitable/app.docapitable.component.ts b/src/app/showcase/layout/doc/docapitable/app.docapitable.component.ts index 83f3c71c6e7..1055ade09e3 100644 --- a/src/app/showcase/layout/doc/docapitable/app.docapitable.component.ts +++ b/src/app/showcase/layout/doc/docapitable/app.docapitable.component.ts @@ -1,6 +1,9 @@ +import { Location } from '@angular/common'; import { ChangeDetectionStrategy, Component, Input, OnInit, ViewContainerRef } from '@angular/core'; import { Router } from '@angular/router'; -import { Location } from '@angular/common'; +import { Subscription } from 'rxjs'; +import { AppConfig } from 'src/app/showcase/domain/appconfig'; +import { AppConfigService } from 'src/app/showcase/service/appconfigservice'; @Component({ selector: 'app-docapitable', @@ -29,9 +32,19 @@ export class AppDocApiTable implements OnInit { @Input() isInterface: boolean = false; - constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location) {} + config: AppConfig; + + subscription: Subscription; - ngOnInit() {} + constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location, public configService: AppConfigService) {} + + ngOnInit() { + this.config = this.configService.config; + + this.subscription = this.configService.configUpdate$.subscribe((config) => { + this.config = config; + }); + } navigate(event, param) { if (typeof window !== undefined) { @@ -106,4 +119,10 @@ export class AppDocApiTable implements OnInit { label && label.parentElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); } } + + ngOnDestroy() { + if (this.subscription) { + this.subscription.unsubscribe(); + } + } } From 3d19f3286a3126662a3a8d4f06636f39e1c32d95 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 11:46:26 +0300 Subject: [PATCH 04/12] API Doc Cosmetics --- src/assets/showcase/styles/layout/_doc.scss | 113 +++++++++++++------- 1 file changed, 75 insertions(+), 38 deletions(-) diff --git a/src/assets/showcase/styles/layout/_doc.scss b/src/assets/showcase/styles/layout/_doc.scss index e9d70aa91b8..594883d5f8a 100644 --- a/src/assets/showcase/styles/layout/_doc.scss +++ b/src/assets/showcase/styles/layout/_doc.scss @@ -180,11 +180,11 @@ overflow: hidden; text-overflow: ellipsis; transition: all .2s; + } - &:hover { - .px-link { - color: var(--surface-900); - } + &:hover { + .px-link { + color: var(--surface-900); } } } @@ -213,6 +213,17 @@ } } +.doc-section-code-buttons { + gap: .75rem; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + + .p-button-label { + font-weight: normal; + font-size: 0.875rem; + } +} + .doc-section-code-tooltip .p-tooltip-text { padding: 0.5rem; font-size: 11px; @@ -225,24 +236,9 @@ } } - .p-button-label { - font-weight: normal; - font-size: 0.875rem; - } - - .doc-section-code-active { - .p-button-label { - font-weight: bold; - } - } - - pre[class*=language-] { + pre { margin: 0; } -} - -app-code { - display: block; &:not(:last-child) { margin-bottom: 1rem; @@ -263,7 +259,7 @@ app-code { th { border-bottom: 1px solid var(--surface-border); - padding: .75rem; + padding: .75rem 1rem; text-align: left; text-transform: capitalize; } @@ -274,37 +270,40 @@ app-code { } td { - padding: .75rem; + padding: .75rem 1rem; border-bottom: 1px solid var(--surface-border); - white-space: pre-wrap; + white-space: pre-line; line-height: 1.5; + scroll-margin-top: 6.5rem; - &.doc-option-type { + &:first-child { + color: var(--primary-color); + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + } + + .doc-option-type { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; color: var(--primary-500); + font-weight: 500; - > a { - color: var(--primary-500); + .doc-option-type-options-container { + display: flex; + align-items: center; + } + span.doc-option-type-options { + color: var(--primary-700); + } + + &.doc-option-link { &:hover { text-decoration: underline; } } } - &.doc-option-default { - font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; - color: var(--primary-color); - } - - &:first-child { - color: var(--primary-color); - font-weight: 700; - font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; - } - .doc-option-name, - > i { + > i:not(.pi) { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; position: relative; scroll-margin-top: 6.5rem; @@ -314,6 +313,7 @@ app-code { padding: 2px 6px; font-weight: 600; font-style: normal; + white-space: nowrap; .doc-option-link { position: absolute; @@ -337,6 +337,43 @@ app-code { } } } + + .doc-option-default, + .doc-option-returnType { + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + font-weight: 400; + font-style: normal; + display: flex; + border-width: 1px; + border-style: solid; + border-radius: 6px; + padding: 2px 6px; + max-width: min-content; + } + + .doc-option-parameter-name { + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + color: var(--primary-700); + } + + .doc-option-parameter-type { + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + color: var(--primary-500); + } + + .doc-option-params { + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; + } + + .doc-option-light { + background: var(--bluegray-50); + border-color: var(--bluegray-100); + } + + .doc-option-dark { + background: var(--bluegray-800); + border-color: var(--bluegray-800); + } } } } From ad3d193f35e650ab24af55492249ed6e6fa9b18f Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 11 Oct 2023 12:16:34 +0300 Subject: [PATCH 05/12] Fixed html-ts doc buttons --- src/app/showcase/layout/doc/code/app.code.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/showcase/layout/doc/code/app.code.component.html b/src/app/showcase/layout/doc/code/app.code.component.html index 2ff073e36e9..94b6595efe6 100644 --- a/src/app/showcase/layout/doc/code/app.code.component.html +++ b/src/app/showcase/layout/doc/code/app.code.component.html @@ -2,12 +2,12 @@
From a78f5ea4a73adbb4a8f6decceb5dc50d13a94447 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 12:17:16 +0300 Subject: [PATCH 06/12] Toast demo reorder --- src/app/showcase/pages/toast/toastdemo.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/app/showcase/pages/toast/toastdemo.ts b/src/app/showcase/pages/toast/toastdemo.ts index 57b16e87cce..8b91eae600d 100755 --- a/src/app/showcase/pages/toast/toastdemo.ts +++ b/src/app/showcase/pages/toast/toastdemo.ts @@ -1,18 +1,18 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/toast/importdoc'; -import { BasicDoc } from '../../doc/toast/basicdoc'; -import { SeverityDoc } from '../../doc/toast/severitydoc'; +import { AccessibilityDoc } from '../../doc/toast/accessibilitydoc'; import { AnimationDoc } from '../../doc/toast/animationdoc'; +import { BasicDoc } from '../../doc/toast/basicdoc'; +import { ClearDoc } from '../../doc/toast/cleardoc'; +import { ImportDoc } from '../../doc/toast/importdoc'; +import { LifeDoc } from '../../doc/toast/lifedoc'; import { MultipleDoc } from '../../doc/toast/multipledoc'; import { PositionDoc } from '../../doc/toast/positiondoc'; import { ResponsiveDoc } from '../../doc/toast/responsivedoc'; -import { LifeDoc } from '../../doc/toast/lifedoc'; +import { SeverityDoc } from '../../doc/toast/severitydoc'; import { StickyDoc } from '../../doc/toast/stickydoc'; import { StyleDoc } from '../../doc/toast/styledoc'; import { TargetDoc } from '../../doc/toast/targetdoc'; import { TemplateDoc } from '../../doc/toast/templatedoc'; -import { ClearDoc } from '../../doc/toast/cleardoc'; -import { AccessibilityDoc } from '../../doc/toast/accessibilitydoc'; @Component({ templateUrl: './toastdemo.html' @@ -54,16 +54,16 @@ export class ToastDemo { label: 'Life', component: LifeDoc }, + { + id: 'clear', + label: 'Clear', + component: ClearDoc + }, { id: 'sticky', label: 'Sticky', component: StickyDoc }, - { - id: 'clear', - label: 'Clearing Messages', - component: ClearDoc - }, { id: 'templating', label: 'Templating', From 64f604fce76d25fd5d2cd32a1681639a180cdd61 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 12:21:20 +0300 Subject: [PATCH 07/12] Image demo order --- src/app/showcase/pages/image/imagedemo.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/app/showcase/pages/image/imagedemo.ts b/src/app/showcase/pages/image/imagedemo.ts index 281031d3204..fe3ef29e6ba 100755 --- a/src/app/showcase/pages/image/imagedemo.ts +++ b/src/app/showcase/pages/image/imagedemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/Image/importdoc'; -import { StyleDoc } from '../../doc/Image/styledoc'; -import { BasicDoc } from '../../doc/Image/basicdoc'; -import { TemplateDoc } from '../../doc/Image/templatedoc'; import { AccessibilityDoc } from '../../doc/Image/accessibilitydoc'; +import { BasicDoc } from '../../doc/Image/basicdoc'; +import { ImportDoc } from '../../doc/Image/importdoc'; import { PreviewDoc } from '../../doc/Image/previewdoc'; import { PreviewImageSourceDoc } from '../../doc/Image/previewimagesourcedoc'; +import { StyleDoc } from '../../doc/Image/styledoc'; +import { TemplateDoc } from '../../doc/Image/templatedoc'; @Component({ templateUrl: './imagedemo.html' @@ -22,19 +22,19 @@ export class ImageDemo { label: 'Basic', component: BasicDoc }, - { - id: 'templates', - label: 'Indicator Template', - component: TemplateDoc - }, { id: 'preview', label: 'Preview', component: PreviewDoc }, + { + id: 'templates', + label: 'Indicator', + component: TemplateDoc + }, { id: 'preview-image-source', - label: 'Preview Image Source', + label: 'Image Source', component: PreviewImageSourceDoc }, { From 0baaacc63482916fed6862c5ec838046fc3fa1a0 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 12:42:42 +0300 Subject: [PATCH 08/12] Galleria Demos Broken Responsiveness --- src/app/showcase/doc/galleria/advanceddoc.ts | 4 ++-- src/app/showcase/doc/galleria/autoplaydoc.ts | 4 ++-- src/app/showcase/doc/galleria/basicdoc.ts | 4 ++-- src/app/showcase/doc/galleria/captiondoc.ts | 4 ++-- src/app/showcase/doc/galleria/controlleddoc.ts | 4 ++-- .../showcase/doc/galleria/fullscreen/customcontentdoc.ts | 8 ++++---- src/app/showcase/doc/galleria/indicator/clickeventdoc.ts | 4 ++-- src/app/showcase/doc/galleria/indicator/hovereventdoc.ts | 4 ++-- src/app/showcase/doc/galleria/indicator/positioneddoc.ts | 8 ++++---- src/app/showcase/doc/galleria/indicator/templatedoc.ts | 4 ++-- src/app/showcase/doc/galleria/navigator/hoverdoc.ts | 4 ++-- src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts | 4 ++-- .../showcase/doc/galleria/navigator/itemthumbnailsdoc.ts | 4 ++-- .../doc/galleria/navigator/itemwithoutthumbnailsdoc.ts | 4 ++-- src/app/showcase/doc/galleria/responsivedoc.ts | 4 ++-- src/app/showcase/doc/galleria/thumbnaildoc.ts | 4 ++-- 16 files changed, 36 insertions(+), 36 deletions(-) diff --git a/src/app/showcase/doc/galleria/advanceddoc.ts b/src/app/showcase/doc/galleria/advanceddoc.ts index 42329c6ab59..03f4245db6d 100644 --- a/src/app/showcase/doc/galleria/advanceddoc.ts +++ b/src/app/showcase/doc/galleria/advanceddoc.ts @@ -10,7 +10,7 @@ import { PhotoService } from '../../service/photoservice';

Galleria can be extended further to implement complex requirements.

 -
+
`, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/autoplaydoc.ts b/src/app/showcase/doc/galleria/autoplaydoc.ts index 5a2c50892b2..c52b7ce62fe 100644 --- a/src/app/showcase/doc/galleria/autoplaydoc.ts +++ b/src/app/showcase/doc/galleria/autoplaydoc.ts @@ -8,7 +8,7 @@ import { PhotoService } from '../../service/photoservice';

A slideshow implementation is defined by adding circular and autoPlay properties.

 -
+
@@ -64,7 +64,7 @@ export class AutoPlayDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/basicdoc.ts b/src/app/showcase/doc/galleria/basicdoc.ts index 1c68f5860eb..3feda29f2ef 100644 --- a/src/app/showcase/doc/galleria/basicdoc.ts +++ b/src/app/showcase/doc/galleria/basicdoc.ts @@ -8,7 +8,7 @@ import { PhotoService } from '../../service/photoservice';

Galleria requires a value as a collection of images, item template for the higher resolution image and thumbnail template to display as a thumbnail.

 -
+
@@ -65,7 +65,7 @@ export class BasicDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/captiondoc.ts b/src/app/showcase/doc/galleria/captiondoc.ts index 7b8d844d3e6..4771999b619 100644 --- a/src/app/showcase/doc/galleria/captiondoc.ts +++ b/src/app/showcase/doc/galleria/captiondoc.ts @@ -8,7 +8,7 @@ import { PhotoService } from '../../service/photoservice';

Description of an image is specified with the caption template.

 -
+
@@ -73,7 +73,7 @@ export class CaptionDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/controlleddoc.ts b/src/app/showcase/doc/galleria/controlleddoc.ts index 171efce433e..ac038f84854 100644 --- a/src/app/showcase/doc/galleria/controlleddoc.ts +++ b/src/app/showcase/doc/galleria/controlleddoc.ts @@ -8,7 +8,7 @@ import { PhotoService } from '../../service/photoservice';

Galleria can be controlled programmatically using the activeIndex property.

 -
+
@@ -92,7 +92,7 @@ export class ControlledDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts index 5b4fddedde3..5ec49291bcf 100644 --- a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts +++ b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts @@ -10,8 +10,8 @@ import { PhotoService } from '../../../service/photoservice';

Using activeIndex, Galleria is displayed with a specific initial image.

-
-
+
+
@@ -99,8 +99,8 @@ export class FullScreenTemplateDoc implements OnInit { `, html: `
-
-
+
+
diff --git a/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts b/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts index 28fa420efa1..80044d7eadd 100644 --- a/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts +++ b/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts @@ -9,7 +9,7 @@ import { PhotoService } from '../../../service/photoservice';

Indicators are displayed at the bottom by enabling showIndicators property and interacted with the click event by default.

 -
+
@@ -59,7 +59,7 @@ export class ClickEventDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts b/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts index 976cb78f00a..ff0e07f18da 100644 --- a/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts +++ b/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts @@ -9,7 +9,7 @@ import { PhotoService } from '../../../service/photoservice';

Indicators can be activated on hover instead of click if changeItemOnIndicatorHover is added.

 -
+
@@ -59,7 +59,7 @@ export class HoverEventDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/indicator/positioneddoc.ts b/src/app/showcase/doc/galleria/indicator/positioneddoc.ts index 1e81f624187..0975a3c78c6 100644 --- a/src/app/showcase/doc/galleria/indicator/positioneddoc.ts +++ b/src/app/showcase/doc/galleria/indicator/positioneddoc.ts @@ -12,7 +12,7 @@ import { PhotoService } from '../../../service/photoservice'; bottom by default, accepted values are top, left, right, and bottom.

-
+
@@ -45,7 +45,7 @@ export class PositionedDoc implements OnInit { images: any[] | undefined; - position: string = 'top'; + position: string = 'bottom'; showIndicatorsOnItem: boolean = false; @@ -107,7 +107,7 @@ export class PositionedDoc implements OnInit { `, html: ` -
+
@@ -131,7 +131,7 @@ import { PhotoService } from '../../service/photoservice'; export class GalleriaIndicatorPositionedDemo implements OnInit { images: any[] | undefined; - position: string = 'top'; + position: string = 'bottom'; showIndicatorsOnItem: boolean = false; diff --git a/src/app/showcase/doc/galleria/indicator/templatedoc.ts b/src/app/showcase/doc/galleria/indicator/templatedoc.ts index 487214c2ff7..11267aedc57 100644 --- a/src/app/showcase/doc/galleria/indicator/templatedoc.ts +++ b/src/app/showcase/doc/galleria/indicator/templatedoc.ts @@ -9,7 +9,7 @@ import { PhotoService } from '../../../service/photoservice';

Indicator content can be customized with the indicator template.

 -
+
@@ -69,7 +69,7 @@ export class TemplateDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/navigator/hoverdoc.ts b/src/app/showcase/doc/galleria/navigator/hoverdoc.ts index fb6fb13988d..3ffb99030dc 100644 --- a/src/app/showcase/doc/galleria/navigator/hoverdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/hoverdoc.ts @@ -9,7 +9,7 @@ import { PhotoService } from '../../../service/photoservice';

Navigators are displayed on hover only if showItemNavigatorsOnHover is enabled.

 -
+
@@ -70,7 +70,7 @@ export class HoverDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts b/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts index 4a745ac1869..a8cb76d032f 100644 --- a/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts @@ -9,7 +9,7 @@ import { PhotoService } from '../../../service/photoservice';

Navigators and Indicators can be combined as well.

 -
+
`, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts b/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts index 87797e44b55..05fb8a9415b 100644 --- a/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts @@ -9,7 +9,7 @@ import { PhotoService } from '../../../service/photoservice';

Add showItemNavigators to display navigator elements and the left and right side.

 -
+
@@ -70,7 +70,7 @@ export class ItemThumbnailsDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts b/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts index bfbcada1672..f81f7dcb45b 100644 --- a/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts @@ -9,7 +9,7 @@ import { PhotoService } from '../../../service/photoservice';

Simple example with indicators only.

 -
+
@@ -60,7 +60,7 @@ export class ItemWithoutThumbnailsDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/responsivedoc.ts b/src/app/showcase/doc/galleria/responsivedoc.ts index 9f7f331c9b0..6962cdbcd5d 100644 --- a/src/app/showcase/doc/galleria/responsivedoc.ts +++ b/src/app/showcase/doc/galleria/responsivedoc.ts @@ -8,7 +8,7 @@ import { PhotoService } from '../../service/photoservice';

Galleria responsiveness is defined with the responsiveOptions property.

 -
+
@@ -64,7 +64,7 @@ export class ResponsiveDoc implements OnInit { `, html: ` -
+
diff --git a/src/app/showcase/doc/galleria/thumbnaildoc.ts b/src/app/showcase/doc/galleria/thumbnaildoc.ts index 37c6a55ba23..460f5e31fc0 100644 --- a/src/app/showcase/doc/galleria/thumbnaildoc.ts +++ b/src/app/showcase/doc/galleria/thumbnaildoc.ts @@ -8,7 +8,7 @@ import { PhotoService } from '../../service/photoservice';

Galleria can be controlled programmatically using the activeIndex property.

 -
+
@@ -88,7 +88,7 @@ export class ThumbnailDoc implements OnInit { `, html: ` -
+
From c9869e33f0aef8c36cfff833a0ad4549ee063d75 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 14:05:15 +0300 Subject: [PATCH 09/12] Fix #13853 - SelectButton: Add allowEmpty property --- .../components/selectbutton/selectbutton.ts | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/src/app/components/selectbutton/selectbutton.ts b/src/app/components/selectbutton/selectbutton.ts index 7cc1439944e..029f4a47130 100755 --- a/src/app/components/selectbutton/selectbutton.ts +++ b/src/app/components/selectbutton/selectbutton.ts @@ -85,6 +85,11 @@ export class SelectButton implements ControlValueAccessor { * @group Props */ @Input() multiple: boolean | undefined; + /** + * Whether selection can not be cleared. + * @group Props + */ + @Input() allowEmpty: boolean = true; /** * Inline style of the component. * @group Props @@ -174,26 +179,24 @@ export class SelectButton implements ControlValueAccessor { const optionValue = this.getOptionValue(option); + let selected = this.isSelected(option); + + if (selected && !this.allowEmpty) { + return; + } + if (this.multiple) { if (this.isSelected(option)) this.removeOption(option); else this.value = [...(this.value || []), optionValue]; - - this.onModelChange(this.value); - - this.onChange.emit({ - originalEvent: event, - value: this.value - }); - } else if (this.value !== optionValue) { - this.value = optionValue; - this.onModelChange(this.value); - - this.onChange.emit({ - originalEvent: event, - value: this.value - }); + } else { + this.value = selected ? null : optionValue; } + this.onModelChange(this.value); + this.onChange.emit({ + originalEvent: event, + value: this.value + }); this.onOptionClick.emit({ originalEvent: event, option: option, From ef1622e52a19fc5f37c6ccf393398af429214199 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 14:06:47 +0300 Subject: [PATCH 10/12] Update apidoc --- src/app/showcase/doc/apidoc/index.json | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index 9f9dc332935..34c7f685c92 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -2234,7 +2234,7 @@ "optional": true, "readonly": false, "type": "\"focus\" | \"hover\"", - "description": "Event to show tooltip." + "description": "Event to show the tooltip." }, { "name": "appendTo", @@ -18592,6 +18592,14 @@ "default": "false", "description": "When specified, allows selecting multiple values." }, + { + "name": "allowEmpty", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Whether selection can not be cleared." + }, { "name": "style", "optional": false, From 452f25520159d1d594948ac73f80d804704d750c Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 11 Oct 2023 14:30:01 +0300 Subject: [PATCH 11/12] Chip Icon Focus Visuals --- src/app/components/chip/chip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/chip/chip.ts b/src/app/components/chip/chip.ts index c32d3f6cecf..020073ea7bb 100755 --- a/src/app/components/chip/chip.ts +++ b/src/app/components/chip/chip.ts @@ -17,7 +17,7 @@ import { TimesCircleIcon } from 'primeng/icons/timescircle'; - + From 5a96037d22ee55f42ef57dce999322adb6a12524 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 11 Oct 2023 14:52:32 +0300 Subject: [PATCH 12/12] Disable first editable column in demo --- src/app/showcase/doc/treetable/editdoc.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/showcase/doc/treetable/editdoc.ts b/src/app/showcase/doc/treetable/editdoc.ts index 91b5817790e..6291821360b 100644 --- a/src/app/showcase/doc/treetable/editdoc.ts +++ b/src/app/showcase/doc/treetable/editdoc.ts @@ -25,7 +25,7 @@ interface Column { - + @@ -73,7 +73,7 @@ export class EditDoc implements OnInit { - + @@ -98,7 +98,7 @@ export class EditDoc implements OnInit { - +