https://signal-iduna.de/etc.clientlibs/signaliduna/clientlibs/clie…ary_Glossary_lit_ts-f4df615489833f909c46.js

1"use strict";(self.webpackChunkaem_maven_archetype=self.webpackChunkaem_maven_archetype||[]).push([["src_main_webpack_components_Glossary_Glossary_lit_ts"],{7144:function(e,t,i){i.r(t),i.d(t,{SiArticleListing:function(){return g}});var s=i(6684),a=i(6505),n=i(5694),l=i(4290),o=i(6781);const r=s.AH`
2
3    :host {
4        position: relative;
5    }
6
7    .glossary-default-text {
8        display: flex;
9        gap: 16px;
10        flex-direction: column;
11    }
12
13    .glossary-title {
14        color: var(--text-100, rgba(0, 0, 0, 0.90));
15        font-size: 19px;
16        font-style: normal;
17        font-weight: 600;
18        line-height: 28px;
19    }
20
21    .specific-tag {
22        margin-bottom: 14px;
23        display: block;
24    }
25
26    .main-tags {
27        display: block;
28        margin-bottom: 16px;
29        padding-bottom: 24px;
30        border-bottom: 1px solid #CCD6EB;
31    }
32
33    .glossary-control {
34        display: flex;
35        justify-content: space-between;
36        margin-bottom: 16px;
37    }
38
39    si-hint {
40        visibility: hidden;
41    }
42
43    si-pagination-simple.disabled {
44        opacity: 0.5;
45        pointer-events: none;
46    }
47
48    .results-list {
49        display: flex;
50        flex-direction: column;
51        gap: 6px;
52        align-items: flex-start;
53    }
54
55    .no-results {
56        display: flex;
57        flex-direction: column;
58        gap: 32px;
59        align-items: center;
60        
61        h4 {
62            color: rgba(0, 0, 0, 0.90);
63            font-style: normal;
64            font-weight: 400;
65            line-height: 30px;
66        }
67    }
68
69    @media (max-width: 600px) {
70        .glossary-control {
71            flex-direction: column;
72            gap: 16px;
73        }
74    }
75`;var c=i(6471),d=function(e,t,i,s){var a,n=arguments.length,l=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,s);else for(var o=e.length-1;o>=0;o--)(a=e[o])&&(l=(n<3?a(l):n>3?a(t,i,l):a(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l};let g=class extends s.WF{constructor(){super(...arguments),this._activeMainTag=null,this._allResults=[],this._isLoading=!1,this._viewMode="paginated",this._currentPageNumber=1,this.updateDeviceState=()=>{this.currentBreakpoint=c.kO.currentBreakpoint()}}get isMobile(){return this.currentBreakpoint===c.EA.mobile||this.currentBreakpoint===c.EA.mobileS||this.currentBreakpoint===c.EA.mobileXS}connectedCallback(){super.connectedCallback(),this.updateDeviceState(),window.addEventListener(c.i$.eventName,this.updateDeviceState)}disconnectedCallback(){window.removeEventListener(c.i$.eventName,this.updateDeviceState)}render(){const e=null!==this._activeMainTag;return s.qy`
76            ${this.renderMainTags()}
77
78            ${e?s.qy`
79                    <div class="glossary-control">
80                        ${this.renderSettings()}
81                        ${this.renderPagination()}
82                    </div>
83                    ${this.renderResults()}
84                `:this.renderDefaultText()}
85        `}renderMainTags(){if(!this.mainTags)return s.s6;try{const e=JSON.parse(this.mainTags);return this.isMobile?s.qy`
86                    <si-select 
87                        class="main-tags"
88                        si-placeholder-multiple="Bitte wählen..." 
89                        si-size="100"

90                        @change=${this._handleMobileTagChange}>
91                        <label slot="label">Bereich auswählen
92                            <select name="main-tag-select">
93                                <option value="">Bitte wählen...</option>
94                                ${Object.entries(e).map(([e,t])=>s.qy`
95                                    <option 
96                                        value="${t.tagId}" 
97                                        ?disabled="${!t.hasResults}"
98                                        .selected=${this._activeMainTag===t.tagId}>
99                                        ${e}
100                                    </option>
101                                `)}
102                            </select>
103                        </label>
104                    </si-select>
105                `:s.qy`
106                <si-chip-group 
107                    class="main-tags"
108                    .value=${this._activeMainTag} 
109                    @change=${this._handleMainTagChange}>
110                    ${Object.entries(e).map(([e,t])=>s.qy`
111                        <si-chip si-label="${e}" ?si-disabled="${!t.hasResults}">
112                            <input 
113                                type="radio" 
114                                name="${t.tagId}"
115                                .checked=${this._activeMainTag===t.tagId}>
116                        </si-chip>
117                    `)}
118                </si-chip-group>
119            `}catch(e){return console.error("Failed to parse tags JSON:",e),s.qy`<p>Error loading tags.</p>`}}renderDefaultText(){return this.title||this.description?s.qy`
120            <div class="glossary-default-text">
121                <div class="glossary-title">${this.title}</div>
122                <div class="glossary-description">${(0,o._)(this.description)}</div>
123            </div>
124        `:s.qy`
125                <div class="no-results">
126                    <si-icon si-sprite="detailed" si-svg="detailedCheck"></si-icon>
127                    <h4 class="no-data">Wähle einen Filter aus.</h4>
128                </div>`}renderSettings(){const e="full"===this._viewMode?"Weniger anzeigen":"Alle anzeigen",t=this._allResults.length<=20;return s.qy`
129        <si-button 
130            aria-describedby="changeViewMode-disabled"
131            si-size="100" si-variant="tertiary" si-icon-align="left">
132            <button @click="${this._changeViewMode}" ?disabled="${t}" aria-disabled="${t?"true":""}">
133                <span>${e}</span>
134            </button>
135        </si-button>
136        `}renderPagination(){const e="full"===this._viewMode||this._allResults.length<=20;return s.qy`
137            <si-pagination-simple
138                class="${e?"disabled":""}"
139                .totalItems="${this._allResults.length}"
140                @si-page-change="${this.handlePagination}"
141                targetId="glossary"
142                .currentPage=${this._currentPageNumber}
143                itemsPerPage="${20}">
144            </si-pagination-simple>
145        `}renderResults(){if(this._isLoading)return s.qy`<div class="loading">
146                <si-skeleton>
147                    <si-skeleton-item></si-skeleton-item>
148                    <si-skeleton-item></si-skeleton-item>
149                    <si-skeleton-item> </si-skeleton-item>
150                </si-skeleton>
151            </div>`;if(!this._activeMainTag)return s.s6;if(0===this._allResults.length)return s.qy`
152                <div class="no-results">
153                    <si-icon si-sprite="detailed" si-svg="detailedCheck"></si-icon>
154                    <h4 class="no-data">Keine passenden Einträge gefunden.</h4>
155                </div>`;let e;if("paginated"===this._viewMode){const t=20*(this._currentPageNumber-1),i=t+20;e=this._allResults.slice(t,i)}else e=this._allResults;return s.qy`
156            <div class="results-list">
157                ${e.map(e=>s.qy`
158                     <si-button-link si-variant="ghost" si-size="100">
159                        <a href="${e.link}">
160                            <span>${e.title}</span>
161                        </a>
162                    </si-button-link>
163                `)}
164            </div>
165        `}async _setActiveTag(e){const t=""===e?null:e;this._activeMainTag=this._activeMainTag===t?null:t,this._currentPageNumber=1,this._viewMode="paginated",await this.fetchPageData()}handlePagination(e){e.detail?.page&&(this._currentPageNumber=e.detail.page)}_changeViewMode(){this._viewMode="full"===this._viewMode?"paginated":"full"}

165_handleMobileTagChange(e){const t=e.target;this._setActiveTag(t.value)}async _handleMainTagChange(e){const t=e.target;this._setActiveTag(t.name)}async fetchPageData(){if(!this._activeMainTag)return void(this._allResults=[]);let e="";if(this._activeMainTag){e+=`.glossaryTag--${this._activeMainTag.replace(/\//g,"+")}`}this.specificTag&&(e+=".categoryTag");const t=`${this.apiUrl}.model${e}.json`;this._isLoading=!0;try{const e=await fetch(t);if(!e.ok)throw new Error(`HTTP error! status: ${e.status}`);const i=await e.json();this._allResults=i.pages||[]}catch(e){console.error("Failed to fetch page data:",e),this._allResults=[]}finally{this._isLoading=!1}}};g.styles=r,d([(0,n.M)({type:String})],g.prototype,"apiUrl",void 0),d([(0,n.M)({type:String})],g.prototype,"title",void 0),d([(0,n.M)({type:String})],g.prototype,"description",void 0),d([(0,n.M)({type:String})],g.prototype,"mainTags",void 0),d([(0,n.M)({type:String})],g.prototype,"specificTag",void 0),d([(0,l.w)()],g.prototype,"_activeMainTag",void 0),d([(0,l.w)()],g.prototype,"_allResults",void 0),d([(0,l.w)()],g.prototype,"_isLoading",void 0),d([(0,l.w)()],g.prototype,"_viewMode",void 0),d([(0,l.w)()],g.prototype,"_currentPageNumber",void 0),d([(0,l.w)()],g.prototype,"currentBreakpoint",void 0),g=d([(0,a.E)("dxp-glossary")],g)}}]);