From 2139ee5963221e02264512818397b7e08708dabf Mon Sep 17 00:00:00 2001
From: Maxim Yarosh <maxim.yarosh@bimeister.com>
Date: Tue, 23 Apr 2024 17:37:49 +0300
Subject: [PATCH] feature: 17733 updated tage demo page

---
 .../examples/example-3/example-3.component.html |  7 +++++++
 .../examples/example-4/example-4.component.html |  8 ++++++++
 .../examples/example-6/example-6.component.html | 17 ++++++++++++++++-
 .../examples/example-6/example-6.component.ts   |  2 ++
 .../examples/example-7/example-7.component.html | 17 +++++++++++++++++
 .../examples/example-8/example-8.component.html |  8 ++++++++
 .../app/pages/tag-demo/tag-demo.component.html  |  2 +-
 .../app/pages/tag-demo/tag-demo.component.ts    |  1 +
 .../tag-action-button.component.scss            |  6 ++++++
 9 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/projects/demo/src/app/pages/tag-demo/examples/example-3/example-3.component.html b/projects/demo/src/app/pages/tag-demo/examples/example-3/example-3.component.html
index 78d99d6e4..eb320b534 100644
--- a/projects/demo/src/app/pages/tag-demo/examples/example-3/example-3.component.html
+++ b/projects/demo/src/app/pages/tag-demo/examples/example-3/example-3.component.html
@@ -36,6 +36,13 @@
     </pupa-tag-action-button>
   </pupa-tag>
 
+  <pupa-tag kind="selected" [clickable]="true">
+    <pupa-tag-text>Selected</pupa-tag-text>
+    <pupa-tag-action-button *pupaTagActionButtonTemplate>
+      <pupa-icon [name]="'app-chevron-down'"></pupa-icon>
+    </pupa-tag-action-button>
+  </pupa-tag>
+
   <pupa-tag kind="custom" [clickable]="true">
     <pupa-tag-text>Custom</pupa-tag-text>
     <pupa-tag-action-button *pupaTagActionButtonTemplate>
diff --git a/projects/demo/src/app/pages/tag-demo/examples/example-4/example-4.component.html b/projects/demo/src/app/pages/tag-demo/examples/example-4/example-4.component.html
index 8ba0986ae..68d6a5b11 100644
--- a/projects/demo/src/app/pages/tag-demo/examples/example-4/example-4.component.html
+++ b/projects/demo/src/app/pages/tag-demo/examples/example-4/example-4.component.html
@@ -4,6 +4,7 @@
   <pupa-tag kind="success" [disabled]="true">Success</pupa-tag>
   <pupa-tag kind="danger" [disabled]="true">Danger</pupa-tag>
   <pupa-tag kind="warning" [disabled]="true">Warning</pupa-tag>
+  <pupa-tag kind="selected" [disabled]="true">Selected</pupa-tag>
   <pupa-tag kind="custom" [disabled]="true">Custom</pupa-tag>
 </div>
 <div class="tag-container">
@@ -42,6 +43,13 @@
     </pupa-tag-action-button>
   </pupa-tag>
 
+  <pupa-tag kind="selected" [clickable]="true" [disabled]="true">
+    <pupa-tag-text>Selected</pupa-tag-text>
+    <pupa-tag-action-button *pupaTagActionButtonTemplate>
+      <pupa-icon [name]="'app-chevron-down'"></pupa-icon>
+    </pupa-tag-action-button>
+  </pupa-tag>
+
   <pupa-tag kind="custom" [clickable]="true" [disabled]="true">
     <pupa-tag-text>Custom</pupa-tag-text>
     <pupa-tag-action-button *pupaTagActionButtonTemplate>
diff --git a/projects/demo/src/app/pages/tag-demo/examples/example-6/example-6.component.html b/projects/demo/src/app/pages/tag-demo/examples/example-6/example-6.component.html
index 8f7e336ed..cffd71267 100644
--- a/projects/demo/src/app/pages/tag-demo/examples/example-6/example-6.component.html
+++ b/projects/demo/src/app/pages/tag-demo/examples/example-6/example-6.component.html
@@ -74,9 +74,24 @@
     </pupa-select-dropdown>
   </pupa-select>
 
+  <pupa-select class="select" [withReset]="true" [formControl]="control6">
+    <pupa-select-trigger-tag [kind]="'selected'">
+      {{ control6.value }}
+    </pupa-select-trigger-tag>
+
+    <pupa-select-dropdown width="320">
+      <pupa-select-options-container>
+        <pupa-select-option *ngFor="let option of options$ | async" [value]="option.value">
+          <pupa-icon name="app-cube-3d"></pupa-icon>
+          {{ option.caption }}
+        </pupa-select-option>
+      </pupa-select-options-container>
+    </pupa-select-dropdown>
+  </pupa-select>
+
   <pupa-select class="select" [withReset]="true" [formControl]="control5">
     <pupa-select-trigger-tag [kind]="'custom'">
-      {{ control6.value }}
+      {{ control7.value }}
     </pupa-select-trigger-tag>
 
     <pupa-select-dropdown width="320">
diff --git a/projects/demo/src/app/pages/tag-demo/examples/example-6/example-6.component.ts b/projects/demo/src/app/pages/tag-demo/examples/example-6/example-6.component.ts
index 77a025627..c2c558daa 100644
--- a/projects/demo/src/app/pages/tag-demo/examples/example-6/example-6.component.ts
+++ b/projects/demo/src/app/pages/tag-demo/examples/example-6/example-6.component.ts
@@ -14,6 +14,7 @@ const SELECT_OPTIONS: SelectOption[] = [
   { value: 'Value 4', caption: 'Report 4' },
   { value: 'Value 5', caption: 'Report 5' },
   { value: 'Value 6', caption: 'Report 6' },
+  { value: 'Value 7', caption: 'Report 7' },
 ];
 
 @Component({
@@ -30,5 +31,6 @@ export class TagExample6Component {
   public readonly control4: FormControl<string> = new FormControl<string>(SELECT_OPTIONS[3].value);
   public readonly control5: FormControl<string> = new FormControl<string>(SELECT_OPTIONS[4].value);
   public readonly control6: FormControl<string> = new FormControl<string>(SELECT_OPTIONS[5].value);
+  public readonly control7: FormControl<string> = new FormControl<string>(SELECT_OPTIONS[6].value);
   public readonly options$: BehaviorSubject<SelectOption[]> = new BehaviorSubject<SelectOption[]>(SELECT_OPTIONS);
 }
diff --git a/projects/demo/src/app/pages/tag-demo/examples/example-7/example-7.component.html b/projects/demo/src/app/pages/tag-demo/examples/example-7/example-7.component.html
index 361bcedf1..423d6f528 100644
--- a/projects/demo/src/app/pages/tag-demo/examples/example-7/example-7.component.html
+++ b/projects/demo/src/app/pages/tag-demo/examples/example-7/example-7.component.html
@@ -84,6 +84,23 @@
     </pupa-tag>
   </div>
 
+  <div class="trigger-container" #tagSelected>
+    <pupa-tag kind="selected" [clickable]="true">
+      <pupa-tag-text>Ninja tag</pupa-tag-text>
+
+      <pupa-tag-action-button
+        *pupaTagActionButtonTemplate
+        pupaDropdown
+        #dropdown="pupaDropdown"
+        [pupaDropdownRealTriggerElement]="tagSelected"
+      >
+        <pupa-icon [name]="(dropdown.opened$ | async) ? 'app-eye-off' : 'app-eye-on'"></pupa-icon>
+
+        <div *pupaDropdownTemplate="dropdown">Hello ninja! 🥷</div>
+      </pupa-tag-action-button>
+    </pupa-tag>
+  </div>
+
   <div class="trigger-container" #tagCustom>
     <pupa-tag kind="custom" [clickable]="true">
       <pupa-tag-text>Ninja tag</pupa-tag-text>
diff --git a/projects/demo/src/app/pages/tag-demo/examples/example-8/example-8.component.html b/projects/demo/src/app/pages/tag-demo/examples/example-8/example-8.component.html
index bdea07873..c0e1aeb78 100644
--- a/projects/demo/src/app/pages/tag-demo/examples/example-8/example-8.component.html
+++ b/projects/demo/src/app/pages/tag-demo/examples/example-8/example-8.component.html
@@ -39,6 +39,14 @@
     </pupa-tag-action-button>
   </pupa-tag>
 
+  <pupa-tag kind="selected">
+    <pupa-tag-text>Ninja tag</pupa-tag-text>
+
+    <pupa-tag-action-button *pupaTagActionButtonTemplate [pupaPopover]="popover5">
+      <pupa-icon [name]="'app-resize'"></pupa-icon>
+    </pupa-tag-action-button>
+  </pupa-tag>
+
   <pupa-tag kind="custom">
     <pupa-tag-text>Ninja tag</pupa-tag-text>
 
diff --git a/projects/demo/src/app/pages/tag-demo/tag-demo.component.html b/projects/demo/src/app/pages/tag-demo/tag-demo.component.html
index c651e5911..05d29b9bb 100644
--- a/projects/demo/src/app/pages/tag-demo/tag-demo.component.html
+++ b/projects/demo/src/app/pages/tag-demo/tag-demo.component.html
@@ -73,7 +73,7 @@ <h3 demoAnchor>Tag inline</h3>
           <pupa-tag [kind]="kind$ | async" [disabled]="disabled$ | async" [clickable]="clickable$ | async">
             Tag
             <pupa-tag-action-button *pupaTagActionButtonTemplate>
-              <pupa-icon [name]="'app-cube'"></pupa-icon>
+              <pupa-icon [name]="'app-chevron-down'"></pupa-icon>
             </pupa-tag-action-button>
           </pupa-tag>
         </div>
diff --git a/projects/demo/src/app/pages/tag-demo/tag-demo.component.ts b/projects/demo/src/app/pages/tag-demo/tag-demo.component.ts
index a291ce648..727ca7faa 100644
--- a/projects/demo/src/app/pages/tag-demo/tag-demo.component.ts
+++ b/projects/demo/src/app/pages/tag-demo/tag-demo.component.ts
@@ -20,6 +20,7 @@ export class TagDemoComponent {
     { caption: 'Success', value: 'success' },
     { caption: 'Danger', value: 'danger' },
     { caption: 'Warning', value: 'warning' },
+    { caption: 'Selected', value: 'selected' },
     { caption: 'Custom', value: 'custom' },
   ];
 
diff --git a/projects/kit/src/components/tag/components/tag-action-button/tag-action-button.component.scss b/projects/kit/src/components/tag/components/tag-action-button/tag-action-button.component.scss
index d5d0eb1ff..076a3298f 100644
--- a/projects/kit/src/components/tag/components/tag-action-button/tag-action-button.component.scss
+++ b/projects/kit/src/components/tag/components/tag-action-button/tag-action-button.component.scss
@@ -40,6 +40,12 @@
       @include tag-preset.pupa-action-button-color-state('warning');
     }
 
+    &.pupa-button_selected {
+      border-left: 1px solid functions.semantic-color(lines-opacity);
+      background-color: functions.semantic-color(kind-primary-normal, alpha-7);
+      color: functions.semantic-color(text-primary);
+    }
+
     &.pupa-button_custom {
       --pupa-tag_action_border-color-default: #{functions.semantic-color(lines-opacity)};