Add setFilterPillTitleAsHtml (#2204)

lrljoe · web-flow · commit b14f456cc3a7 · 2025-02-16T23:42:49.000Z
* Add setFilterPillTitleAsHtml

* Fix styling

* Add Filter Pill Handler

* Fix styling

* Adjust for new Pill View Component

* Adjust FilterPillDataTest

* Fix styling

* Temporarily disable filter pill separator test
diff --git a/resources/views/components/tools/filter-pills.blade.php b/resources/views/components/tools/filter-pills.blade.php
@@ -22,7 +22,7 @@
         @if ($filterPillData->hasCustomPillBlade)
             @include($filterPillData->getCustomPillBlade(), ['filter' => $this->getFilterByKey($filterKey), 'filterPillData' => $filterPillData])
         @else
-            <x-livewire-tables::tools.filter-pills.pills-item :$filterKey :$filterPillData :shouldWatch="$filterPillData->isAnExternalLivewireFilter" />
+            <x-livewire-tables::filter-pill :$filterKey :$filterPillData />
         @endif
     @endtableloop
 
diff --git a/resources/views/includes/filter-pill.blade.php b/resources/views/includes/filter-pill.blade.php
@@ -0,0 +1,22 @@
+@aware(['tableName','isTailwind','isBootstrap4','isBootstrap5'])
+
+<div x-data="filterPillsHandler(@js($setupData))" x-bind="trigger" 
+    wire:key="{{ $tableName }}-filter-pill-{{ $filterKey }}" {{
+    $attributes->merge($filterPillsItemAttributes)
+    ->class([
+        'inline-flex items-center px-2.5 py-0.5 rounded-full leading-4' => $isTailwind && ($filterPillsItemAttributes['default-styling'] ?? true),
+        'text-xs font-medium capitalize' => $isTailwind && ($filterPillsItemAttributes['default-text'] ?? ($filterPillsItemAttributes['default-styling'] ?? true)),
+        'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind && ($filterPillsItemAttributes['default-colors'] ?? true),
+        'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4 && ($filterPillsItemAttributes['default-styling'] ?? true),
+        'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5 && ($filterPillsItemAttributes['default-styling'] ?? true),
+    ])
+    ->except(['default', 'default-styling', 'default-colors'])
+}}
+>
+<span {{ $attributes->merge($pillTitleDisplayDataArray) }}></span>
+
+<span {{ $attributes->merge($pillDisplayDataArray) }}></span>
+
+<x-livewire-tables::tools.filter-pills.buttons.reset-filter :$filterKey :$filterPillData/>
+
+</div>
diff --git a/src/DataTransferObjects/Filters/FilterPillData.php b/src/DataTransferObjects/Filters/FilterPillData.php
@@ -6,142 +6,147 @@
 
 class FilterPillData
 {
+    public string $separatedValues = '';
+
     public function __construct(
+        protected string $filterKey,
         protected string $filterPillTitle,
-        protected string $filterSelectName,
         protected string|array|null $filterPillValue,
         protected string $separator,
         public bool $isAnExternalLivewireFilter,
         public bool $hasCustomPillBlade,
         protected ?string $customPillBlade,
         protected array $filterPillsItemAttributes,
-        protected ?string $separatedValues,
         protected bool $renderPillsAsHtml,
         protected bool $watchForEvents,
-        protected array $customResetButtonAttributes, ) {}
+        protected array $customResetButtonAttributes,
+        protected bool $renderPillsTitleAsHtml) {}
 
-    public static function make(string $filterPillTitle, string $filterSelectName, string|array|null $filterPillValue, string $separator = ', ', bool $isAnExternalLivewireFilter = false, bool $hasCustomPillBlade = false, ?string $customPillBlade = null, array $filterPillsItemAttributes = [], ?string $separatedValues = null, bool $renderPillsAsHtml = false, bool $watchForEvents = false, array $customResetButtonAttributes = []): FilterPillData
+    public static function make(string $filterKey, string $filterPillTitle, string|array|null $filterPillValue, string $separator = ', ', bool $isAnExternalLivewireFilter = false, bool $hasCustomPillBlade = false, ?string $customPillBlade = null, array $filterPillsItemAttributes = [], bool $renderPillsAsHtml = false, bool $watchForEvents = false, array $customResetButtonAttributes = [], bool $renderPillsTitleAsHtml = false): FilterPillData
     {
         if ($isAnExternalLivewireFilter) {
             $watchForEvents = true;
         }
 
-        return new self($filterPillTitle, $filterSelectName, $filterPillValue, $separator, $isAnExternalLivewireFilter, $hasCustomPillBlade, $customPillBlade, $filterPillsItemAttributes, $separatedValues, $renderPillsAsHtml, $watchForEvents, $customResetButtonAttributes);
+        return new self($filterKey, $filterPillTitle, $filterPillValue, $separator, $isAnExternalLivewireFilter, $hasCustomPillBlade, $customPillBlade, $filterPillsItemAttributes, $renderPillsAsHtml, $watchForEvents, $customResetButtonAttributes, $renderPillsTitleAsHtml);
     }
 
     public function getTitle(): string
     {
         return $this->filterPillTitle;
     }
 
-    public function getSelectName(): string
+    public function getPillValue(): array|string|null
     {
-        return $this->filterSelectName;
+        return $this->filterPillValue;
     }
 
-    public function getPillValue(): array|string|null
+    public function getHasCustomPillBlade(): bool
     {
-        return $this->filterPillValue;
+        return $this->hasCustomPillBlade ?? false;
     }
 
-    public function isPillValueAnArray(): bool
+    public function getCustomPillBlade(): ?string
     {
-        return ! is_null($this->filterPillValue) && is_array($this->filterPillValue);
+        return $this->customPillBlade;
     }
 
-    public function getSeparatedPillValue(): array|string|null
+    public function getCustomResetButtonAttributes(): array
     {
-        if ($this->isPillValueAnArray()) {
-            return implode($this->getSeparator(), $this->getPillValue());
-        } else {
-            return $this->getPillValue();
-        }
+        return $this->customResetButtonAttributes ?? [];
     }
 
-    public function getValueFromPillData(): array|string|null
+    public function getIsAnExternalLivewireFilter(): int
     {
-        if ($this->isPillValueAnArray()) {
-            return implode($this->getSeparator(), $this->getPillValue());
-        } else {
-            return $this->getPillValue();
-        }
+        return intval($this->isAnExternalLivewireFilter ?? false);
     }
 
-    public function getHasCustomPillBlade(): bool
+    public function getSeparator(): string
     {
-        return $this->hasCustomPillBlade ?? false;
+        return $this->separator ?? ', ';
     }
 
-    public function getCustomPillBlade(): ?string
+    public function shouldUsePillsAsHtml(): int
     {
-        return $this->customPillBlade;
+        return intval($this->renderPillsAsHtml ?? false);
     }
 
-    public function getIsAnExternalLivewireFilter(): int
+    public function shouldUsePillsTitleAsHtml(): int
     {
-        return intval($this->isAnExternalLivewireFilter ?? false);
+        return intval($this->renderPillsTitleAsHtml ?? false);
     }
 
-    public function getSeparator(): string
+    public function shouldWatchForEvents(): int
     {
-        return $this->separator ?? ', ';
+        return intval($this->watchForEvents ?? false);
     }
 
-    public function getSeparatedValues(): string
+    public function isPillValueAnArray(): bool
     {
-        return $this->separatedValues ?? $this->getSeparatedPillValue();
+        return ! is_null($this->filterPillValue) && is_array($this->filterPillValue);
     }
 
-    public function getFilterPillsItemAttributes(): array
+    public function getSeparatedPillValue(): ?string
     {
-        return array_merge(['default' => true, 'default-colors' => true, 'default-styling' => true, 'default-text' => true], $this->filterPillsItemAttributes);
+        if ($this->isPillValueAnArray()) {
+            return implode($this->getSeparator(), $this->getPillValue());
+        } else {
+            return $this->getPillValue();
+        }
     }
 
-    public function shouldUsePillsAsHtml(): int
+    public function getSafeSeparatedPillValue(): ?string
     {
-        return intval($this->renderPillsAsHtml ?? false);
+        $string = $this->getSeparatedPillValue();
+
+        return htmlentities($string, ENT_QUOTES, 'UTF-8');
+
     }
 
-    public function shouldWatchForEvents(): int
+    public function getFilterPillsItemAttributes(): array
     {
-        return intval($this->watchForEvents ?? false);
+        return array_merge(['default' => true, 'default-colors' => true, 'default-styling' => true, 'default-text' => true], $this->filterPillsItemAttributes);
     }
 
-    public function getFilterPillDisplayData(): ComponentAttributeBag
+    public function getFilterPillDisplayDataArray(): array
     {
+        $array = [];
         if ($this->getIsAnExternalLivewireFilter()) {
-            return $this->getExternalFilterPillDisplayData();
+            return $this->getExternalFilterPillDisplayDataArray($array);
         }
 
-        return $this->getInternalFilterPillDisplayData();
+        return $this->getInternalFilterPillDisplayDataArray($array);
     }
 
-    public function getInternalFilterPillDisplayData(): ComponentAttributeBag
+    public function getExternalFilterPillDisplayDataArray(array $array = []): array
     {
-        return new ComponentAttributeBag([
-            'x-data' => "{ internalDisplayString: ''}",
-            'x-init' => "internalDisplayString = updatePillValues('".$this->getSeparatedValues()."');",
-            $this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text' => 'internalDisplayString',
-        ]);
+        $array[$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text'] = 'displayString';
+
+        return $array;
     }
 
-    public function getExternalFilterPillDisplayData(): ComponentAttributeBag
+    public function getInternalFilterPillDisplayDataArray(array $array = []): array
     {
-        return new ComponentAttributeBag([
-            $this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text' => 'displayString',
-        ]);
+
+        $array['x-data'] = "{ internalDisplayString: ''}";
+        $array['x-init'] = 'internalDisplayString = updatePillValues('.json_encode($this->getSafeSeparatedPillValue()).')';
+        $array[$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text'] = 'internalDisplayString';
+
+        return $array;
     }
 
-    public function getPillSetupData(string $filterKey = '', bool $shouldWatch = false): array
+    public function getFilterTitleDisplayDataArray(array $array = []): array
     {
-        $array = array_merge(['filterKey' => $filterKey, 'watchForEvents' => $shouldWatch], $this->toArray());
+        $array[$this->shouldUsePillsTitleAsHtml() ? 'x-html' : 'x-text'] = "localFilterTitle + ':&nbsp;'";
 
         return $array;
     }
 
-    public function getCustomResetButtonAttributes(): array
+    public function getPillSetupData(string $filterKey = '', bool $shouldWatch = false): array
     {
-        return $this->customResetButtonAttributes ?? [];
+        $array = array_merge(['filterKey' => $filterKey, 'watchForEvents' => $shouldWatch], $this->toArray());
+
+        return $array;
     }
 
     public function getCalculatedCustomResetButtonAttributes(string $filterKey, array $filterPillsResetFilterButtonAttributes): array
@@ -163,16 +168,17 @@ public function getCalculatedCustomResetButtonAttributes(string $filterKey, arra
     public function toArray(): array
     {
         return [
+            'filterKey' => $this->filterKey,
             'filterPillTitle' => $this->getTitle(),
-            'filterSelectName' => $this->getSelectName(),
             'filterPillValue' => $this->getPillValue(),
             'isAnExternalLivewireFilter' => $this->getIsAnExternalLivewireFilter(),
             'hasCustomPillBlade' => $this->getHasCustomPillBlade(),
             'customPillBlade' => $this->getCustomPillBlade(),
             'separator' => $this->getSeparator(),
+            'separatedValues' => $this->getSafeSeparatedPillValue(),
             'filterPillsItemAttributes' => $this->getFilterPillsItemAttributes(),
-            'separatedValues' => $this->getSeparatedValues(),
             'renderPillsAsHtml' => $this->shouldUsePillsAsHtml(),
+            'renderPillsTitleAsHtml' => $this->shouldUsePillsTitleAsHtml(),
             'watchForEvents' => $this->shouldWatchForEvents(),
         ];
     }
diff --git a/src/LaravelLivewireTablesServiceProvider.php b/src/LaravelLivewireTablesServiceProvider.php
@@ -43,6 +43,7 @@ public function boot(): void
         $this->addBladeLoopDirective();
 
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'livewire-tables');
+        Blade::componentNamespace('Rappasoft\\LaravelLivewireTables\\View\\Components', 'livewire-tables');
 
         $this->consoleCommands();
 
diff --git a/src/Traits/Filters/HandlesPillsData.php b/src/Traits/Filters/HandlesPillsData.php
@@ -10,40 +10,21 @@ public function getPillDataForFilter(): array
     {
         $filters = [];
 
-        foreach ($this->getAppliedFiltersWithValuesForPills() as $filterSelectName => $value) {
-            if (! is_null($filter = $this->getFilterByKey($filterSelectName))) {
-                if ($filter->isEmpty($value)) {
-                    continue;
-                }
-                $customPillBlade = null;
-                $isAnExternalLivewireFilter = (method_exists($filter, 'isAnExternalLivewireFilter') && $filter->isAnExternalLivewireFilter());
-                $separator = method_exists($filter, 'getPillsSeparator') ? $filter->getPillsSeparator() : ', ';
-                $separatedValues = null;
-
-                //  dd($value);
-
-                if ($hasCustomPillBlade = $filter->hasCustomPillBlade()) {
-                    $customPillBlade = $filter->getCustomPillBlade();
-                }
-
-                if (is_array($value) && ! empty($value)) {
-                    $separatedValues = implode($separator, $filter->getFilterPillValue($value));
-                }
-
+        foreach ($this->getAppliedFiltersWithValuesForPills() as $filterKey => $value) {
+            if (! is_null($filter = $this->getFilterByKey($filterKey))) {
                 $filters[$filter->getKey()] = FilterPillData::make(
-                    customPillBlade: $customPillBlade,
+                    filterKey: $filter->getKey(),
+                    customPillBlade: $filter->getCustomPillBlade() ?? null,
                     filterPillsItemAttributes: array_merge($this->getFilterPillsItemAttributes(), ($filter->hasPillAttributes() ? $filter->getPillAttributes() : [])),
 
                     filterPillTitle: $filter->getFilterPillTitle(),
                     filterPillValue: $filter->getFilterPillValue($value),
 
-                    filterSelectName: $filterSelectName,
-
-                    hasCustomPillBlade: $hasCustomPillBlade,
-                    isAnExternalLivewireFilter: $isAnExternalLivewireFilter,
-                    separatedValues: $separatedValues,
+                    hasCustomPillBlade: $filter->hasCustomPillBlade(),
+                    isAnExternalLivewireFilter: (method_exists($filter, 'isAnExternalLivewireFilter') && $filter->isAnExternalLivewireFilter()),
                     separator: method_exists($filter, 'getPillsSeparator') ? $filter->getPillsSeparator() : ', ',
                     renderPillsAsHtml: $filter->getPillsAreHtml() ?? false,
+                    renderPillsTitleAsHtml: $filter->getFilterPillTitleAsHtml() ?? false,
                     customResetButtonAttributes: $filter->getPillResetButtonAttributes(),
 
                 );
diff --git a/src/View/Components/FilterPill.php b/src/View/Components/FilterPill.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\View\Components;
+
+use Illuminate\View\Component;
+use Rappasoft\LaravelLivewireTables\DataTransferObjects\Filters\FilterPillData;
+
+class FilterPill extends Component
+{
+    public bool $shouldWatch = false;
+
+    public function __construct(public string $filterKey, public FilterPillData $filterPillData)
+    {
+        $this->shouldWatch = $this->filterPillData->shouldWatchForEvents() ?? 0;
+    }
+
+    public function render(): null|string|\Illuminate\Support\HtmlString|\Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
+    {
+        return view('livewire-tables::includes.filter-pill')
+            ->with([
+                'filterPillsItemAttributes' => $this->filterPillData->getFilterPillsItemAttributes(),
+                'pillDisplayDataArray' => $this->filterPillData->getFilterPillDisplayDataArray(),
+                'pillTitleDisplayDataArray' => $this->filterPillData->getFilterTitleDisplayDataArray(),
+                'setupData' => $this->filterPillData->getPillSetupData($this->filterKey, $this->shouldWatch),
+            ]);
+
+    }
+}
diff --git a/src/Views/Filters/Traits/Styling/HandlesFilterPillsAttributes.php b/src/Views/Filters/Traits/Styling/HandlesFilterPillsAttributes.php
@@ -20,6 +20,8 @@ trait HandlesFilterPillsAttributes
      */
     protected array $pillResetButtonAttributes = [];
 
+    protected bool $pillTitleAsHtml = false;
+
     public function getPillAttributesBag(): ComponentAttributeBag
     {
         return new ComponentAttributeBag($this->getPillAttributes());
@@ -82,4 +84,16 @@ public function getFilterPillResetButtonAttributesMerged(array $resetFilterButto
             $this->getPillResetButtonAttributes()
         );
     }
+
+    public function setFilterPillTitleAsHtml(bool $pillTitleAsHtml): self
+    {
+        $this->pillTitleAsHtml = $pillTitleAsHtml;
+
+        return $this;
+    }
+
+    public function getFilterPillTitleAsHtml(): bool
+    {
+        return $this->pillTitleAsHtml;
+    }
 }
diff --git a/tests/Unit/DataTransferObjects/FilterPillDataTest.php b/tests/Unit/DataTransferObjects/FilterPillDataTest.php
diff --git a/tests/Visuals/FilterVisualsTest.php b/tests/Visuals/FilterVisualsTest.php

Original file line number	Diff line number	Diff line change
`@@ -6,142 +6,147 @@`
`6`	`6`
`7`	`7`	`class FilterPillData`
`8`	`8`	`{`
	`9`	`+ public string $separatedValues = '';`
	`10`	`+`
`9`	`11`	`public function __construct(`
	`12`	`+ protected string $filterKey,`
`10`	`13`	`protected string $filterPillTitle,`
`11`		`- protected string $filterSelectName,`
`12`	`14`	`protected string\|array\|null $filterPillValue,`
`13`	`15`	`protected string $separator,`
`14`	`16`	`public bool $isAnExternalLivewireFilter,`
`15`	`17`	`public bool $hasCustomPillBlade,`
`16`	`18`	`protected ?string $customPillBlade,`
`17`	`19`	`protected array $filterPillsItemAttributes,`
`18`		`- protected ?string $separatedValues,`
`19`	`20`	`protected bool $renderPillsAsHtml,`
`20`	`21`	`protected bool $watchForEvents,`
`21`		`- protected array $customResetButtonAttributes, ) {}`
	`22`	`+ protected array $customResetButtonAttributes,`
	`23`	`+ protected bool $renderPillsTitleAsHtml) {}`
`22`	`24`
`23`		`- public static function make(string $filterPillTitle, string $filterSelectName, string\|array\|null $filterPillValue, string $separator = ', ', bool $isAnExternalLivewireFilter = false, bool $hasCustomPillBlade = false, ?string $customPillBlade = null, array $filterPillsItemAttributes = [], ?string $separatedValues = null, bool $renderPillsAsHtml = false, bool $watchForEvents = false, array $customResetButtonAttributes = []): FilterPillData`
	`25`	`+ public static function make(string $filterKey, string $filterPillTitle, string\|array\|null $filterPillValue, string $separator = ', ', bool $isAnExternalLivewireFilter = false, bool $hasCustomPillBlade = false, ?string $customPillBlade = null, array $filterPillsItemAttributes = [], bool $renderPillsAsHtml = false, bool $watchForEvents = false, array $customResetButtonAttributes = [], bool $renderPillsTitleAsHtml = false): FilterPillData`
`24`	`26`	`{`
`25`	`27`	`if ($isAnExternalLivewireFilter) {`
`26`	`28`	`$watchForEvents = true;`
`27`	`29`	`}`
`28`	`30`
`29`		`- return new self($filterPillTitle, $filterSelectName, $filterPillValue, $separator, $isAnExternalLivewireFilter, $hasCustomPillBlade, $customPillBlade, $filterPillsItemAttributes, $separatedValues, $renderPillsAsHtml, $watchForEvents, $customResetButtonAttributes);`
	`31`	`+ return new self($filterKey, $filterPillTitle, $filterPillValue, $separator, $isAnExternalLivewireFilter, $hasCustomPillBlade, $customPillBlade, $filterPillsItemAttributes, $renderPillsAsHtml, $watchForEvents, $customResetButtonAttributes, $renderPillsTitleAsHtml);`
`30`	`32`	`}`
`31`	`33`
`32`	`34`	`public function getTitle(): string`
`33`	`35`	`{`
`34`	`36`	`return $this->filterPillTitle;`
`35`	`37`	`}`
`36`	`38`
`37`		`- public function getSelectName(): string`
	`39`	`+ public function getPillValue(): array\|string\|null`
`38`	`40`	`{`
`39`		`- return $this->filterSelectName;`
	`41`	`+ return $this->filterPillValue;`
`40`	`42`	`}`
`41`	`43`
`42`		`- public function getPillValue(): array\|string\|null`
	`44`	`+ public function getHasCustomPillBlade(): bool`
`43`	`45`	`{`
`44`		`- return $this->filterPillValue;`
	`46`	`+ return $this->hasCustomPillBlade ?? false;`
`45`	`47`	`}`
`46`	`48`
`47`		`- public function isPillValueAnArray(): bool`
	`49`	`+ public function getCustomPillBlade(): ?string`
`48`	`50`	`{`
`49`		`- return ! is_null($this->filterPillValue) && is_array($this->filterPillValue);`
	`51`	`+ return $this->customPillBlade;`
`50`	`52`	`}`
`51`	`53`
`52`		`- public function getSeparatedPillValue(): array\|string\|null`
	`54`	`+ public function getCustomResetButtonAttributes(): array`
`53`	`55`	`{`
`54`		`- if ($this->isPillValueAnArray()) {`
`55`		`- return implode($this->getSeparator(), $this->getPillValue());`
`56`		`- } else {`
`57`		`- return $this->getPillValue();`
`58`		`- }`
	`56`	`+ return $this->customResetButtonAttributes ?? [];`
`59`	`57`	`}`
`60`	`58`
`61`		`- public function getValueFromPillData(): array\|string\|null`
	`59`	`+ public function getIsAnExternalLivewireFilter(): int`
`62`	`60`	`{`
`63`		`- if ($this->isPillValueAnArray()) {`
`64`		`- return implode($this->getSeparator(), $this->getPillValue());`
`65`		`- } else {`
`66`		`- return $this->getPillValue();`
`67`		`- }`
	`61`	`+ return intval($this->isAnExternalLivewireFilter ?? false);`
`68`	`62`	`}`
`69`	`63`
`70`		`- public function getHasCustomPillBlade(): bool`
	`64`	`+ public function getSeparator(): string`
`71`	`65`	`{`
`72`		`- return $this->hasCustomPillBlade ?? false;`
	`66`	`+ return $this->separator ?? ', ';`
`73`	`67`	`}`
`74`	`68`
`75`		`- public function getCustomPillBlade(): ?string`
	`69`	`+ public function shouldUsePillsAsHtml(): int`
`76`	`70`	`{`
`77`		`- return $this->customPillBlade;`
	`71`	`+ return intval($this->renderPillsAsHtml ?? false);`
`78`	`72`	`}`
`79`	`73`
`80`		`- public function getIsAnExternalLivewireFilter(): int`
	`74`	`+ public function shouldUsePillsTitleAsHtml(): int`
`81`	`75`	`{`
`82`		`- return intval($this->isAnExternalLivewireFilter ?? false);`
	`76`	`+ return intval($this->renderPillsTitleAsHtml ?? false);`
`83`	`77`	`}`
`84`	`78`
`85`		`- public function getSeparator(): string`
	`79`	`+ public function shouldWatchForEvents(): int`
`86`	`80`	`{`
`87`		`- return $this->separator ?? ', ';`
	`81`	`+ return intval($this->watchForEvents ?? false);`
`88`	`82`	`}`
`89`	`83`
`90`		`- public function getSeparatedValues(): string`
	`84`	`+ public function isPillValueAnArray(): bool`
`91`	`85`	`{`
`92`		`- return $this->separatedValues ?? $this->getSeparatedPillValue();`
	`86`	`+ return ! is_null($this->filterPillValue) && is_array($this->filterPillValue);`
`93`	`87`	`}`
`94`	`88`
`95`		`- public function getFilterPillsItemAttributes(): array`
	`89`	`+ public function getSeparatedPillValue(): ?string`
`96`	`90`	`{`
`97`		`- return array_merge(['default' => true, 'default-colors' => true, 'default-styling' => true, 'default-text' => true], $this->filterPillsItemAttributes);`
	`91`	`+ if ($this->isPillValueAnArray()) {`
	`92`	`+ return implode($this->getSeparator(), $this->getPillValue());`
	`93`	`+ } else {`
	`94`	`+ return $this->getPillValue();`
	`95`	`+ }`
`98`	`96`	`}`
`99`	`97`
`100`		`- public function shouldUsePillsAsHtml(): int`
	`98`	`+ public function getSafeSeparatedPillValue(): ?string`
`101`	`99`	`{`
`102`		`- return intval($this->renderPillsAsHtml ?? false);`
	`100`	`+ $string = $this->getSeparatedPillValue();`
	`101`	`+`
	`102`	`+ return htmlentities($string, ENT_QUOTES, 'UTF-8');`
	`103`	`+`
`103`	`104`	`}`
`104`	`105`
`105`		`- public function shouldWatchForEvents(): int`
	`106`	`+ public function getFilterPillsItemAttributes(): array`
`106`	`107`	`{`
`107`		`- return intval($this->watchForEvents ?? false);`
	`108`	`+ return array_merge(['default' => true, 'default-colors' => true, 'default-styling' => true, 'default-text' => true], $this->filterPillsItemAttributes);`
`108`	`109`	`}`
`109`	`110`
`110`		`- public function getFilterPillDisplayData(): ComponentAttributeBag`
	`111`	`+ public function getFilterPillDisplayDataArray(): array`
`111`	`112`	`{`
	`113`	`+ $array = [];`
`112`	`114`	`if ($this->getIsAnExternalLivewireFilter()) {`
`113`		`- return $this->getExternalFilterPillDisplayData();`
	`115`	`+ return $this->getExternalFilterPillDisplayDataArray($array);`
`114`	`116`	`}`
`115`	`117`
`116`		`- return $this->getInternalFilterPillDisplayData();`
	`118`	`+ return $this->getInternalFilterPillDisplayDataArray($array);`
`117`	`119`	`}`
`118`	`120`
`119`		`- public function getInternalFilterPillDisplayData(): ComponentAttributeBag`
	`121`	`+ public function getExternalFilterPillDisplayDataArray(array $array = []): array`
`120`	`122`	`{`
`121`		`- return new ComponentAttributeBag([`
`122`		`- 'x-data' => "{ internalDisplayString: ''}",`
`123`		`- 'x-init' => "internalDisplayString = updatePillValues('".$this->getSeparatedValues()."');",`
`124`		`- $this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text' => 'internalDisplayString',`
`125`		`- ]);`
	`123`	`+ $array[$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text'] = 'displayString';`
	`124`	`+`
	`125`	`+ return $array;`
`126`	`126`	`}`
`127`	`127`
`128`		`- public function getExternalFilterPillDisplayData(): ComponentAttributeBag`
	`128`	`+ public function getInternalFilterPillDisplayDataArray(array $array = []): array`
`129`	`129`	`{`
`130`		`- return new ComponentAttributeBag([`
`131`		`- $this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text' => 'displayString',`
`132`		`- ]);`
	`130`	`+`
	`131`	`+ $array['x-data'] = "{ internalDisplayString: ''}";`
	`132`	`+ $array['x-init'] = 'internalDisplayString = updatePillValues('.json_encode($this->getSafeSeparatedPillValue()).')';`
	`133`	`+ $array[$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text'] = 'internalDisplayString';`
	`134`	`+`
	`135`	`+ return $array;`
`133`	`136`	`}`
`134`	`137`
`135`		`- public function getPillSetupData(string $filterKey = '', bool $shouldWatch = false): array`
	`138`	`+ public function getFilterTitleDisplayDataArray(array $array = []): array`
`136`	`139`	`{`
`137`		`- $array = array_merge(['filterKey' => $filterKey, 'watchForEvents' => $shouldWatch], $this->toArray());`
	`140`	`+ $array[$this->shouldUsePillsTitleAsHtml() ? 'x-html' : 'x-text'] = "localFilterTitle + ': '";`
`138`	`141`
`139`	`142`	`return $array;`
`140`	`143`	`}`
`141`	`144`
`142`		`- public function getCustomResetButtonAttributes(): array`
	`145`	`+ public function getPillSetupData(string $filterKey = '', bool $shouldWatch = false): array`
`143`	`146`	`{`
`144`		`- return $this->customResetButtonAttributes ?? [];`
	`147`	`+ $array = array_merge(['filterKey' => $filterKey, 'watchForEvents' => $shouldWatch], $this->toArray());`
	`148`	`+`
	`149`	`+ return $array;`
`145`	`150`	`}`
`146`	`151`
`147`	`152`	`public function getCalculatedCustomResetButtonAttributes(string $filterKey, array $filterPillsResetFilterButtonAttributes): array`
`@@ -163,16 +168,17 @@ public function getCalculatedCustomResetButtonAttributes(string $filterKey, arra`
`163`	`168`	`public function toArray(): array`
`164`	`169`	`{`
`165`	`170`	`return [`
	`171`	`+ 'filterKey' => $this->filterKey,`
`166`	`172`	`'filterPillTitle' => $this->getTitle(),`
`167`		`- 'filterSelectName' => $this->getSelectName(),`
`168`	`173`	`'filterPillValue' => $this->getPillValue(),`
`169`	`174`	`'isAnExternalLivewireFilter' => $this->getIsAnExternalLivewireFilter(),`
`170`	`175`	`'hasCustomPillBlade' => $this->getHasCustomPillBlade(),`
`171`	`176`	`'customPillBlade' => $this->getCustomPillBlade(),`
`172`	`177`	`'separator' => $this->getSeparator(),`
	`178`	`+ 'separatedValues' => $this->getSafeSeparatedPillValue(),`
`173`	`179`	`'filterPillsItemAttributes' => $this->getFilterPillsItemAttributes(),`
`174`		`- 'separatedValues' => $this->getSeparatedValues(),`
`175`	`180`	`'renderPillsAsHtml' => $this->shouldUsePillsAsHtml(),`
	`181`	`+ 'renderPillsTitleAsHtml' => $this->shouldUsePillsTitleAsHtml(),`
`176`	`182`	`'watchForEvents' => $this->shouldWatchForEvents(),`
`177`	`183`	`];`
`178`	`184`	`}`