@arbetsformedlingen/yrkesvaljaren 2.0.5

package/dist/collection/components/job-selector/test-data.mock.js

@@ -0,0 +1,33 @@
+/**
+ * En kontrollerad och statisk datamängd för enhetstester.
+ * Denna data är designad för att testa specifika logikregler
+ * och ska inte ändras om inte logiken den testar ändras.
+ */
+export const mockSearchTestData = [
+    // === GRUNDLÄGGANDE SORTERING ===
+    // Regel: Högre vikt vinner
+    { id: 'prio-1', type: 'occupation-name', preferred_label: 'Högst Vikt', weight: 200 },
+    { id: 'prio-2', type: 'occupation-name', preferred_label: 'Lägst Vikt', weight: 10 },
+    // Regel: Alfabetisk sortering vid samma vikt
+    { id: 'alpha-1', type: 'occupation-name', preferred_label: 'Zebra (samma vikt)', weight: 150 },
+    { id: 'alpha-2', type: 'occupation-name', preferred_label: 'Apa (samma vikt)', weight: 150 },
+    // === SVENSKA TECKEN (ÅÄÖ) ===
+    // Regel: Korrekt svensk alfabetisk sortering vid samma vikt
+    { id: 'swe-1', type: 'occupation-name', preferred_label: 'Ödla', weight: 50 },
+    { id: 'swe-2', type: 'occupation-name', preferred_label: 'Älg', weight: 50 },
+    { id: 'swe-3', type: 'occupation-name', preferred_label: 'Åsna', weight: 50 },
+    // === MATCHNINGSTYPER (SCORE) ===
+    // Regel: Prefix (1.0) > Innehåller (0.9) > Fuzzy (< 0.9)
+    { id: 'match-1', type: 'occupation-name', preferred_label: 'Läkare', weight: 100 }, // Kan matchas exakt/prefix
+    { id: 'match-2', type: 'job-title', preferred_label: 'Distriktsläkare', occupation_name_id: 'match-1', occupation_name_preferred_label: 'Läkare', weight: 90 }, // Innehåller "Läkare"
+    { id: 'match-3', type: 'occupation-name', preferred_label: 'Lakare', weight: 80 }, // Fuzzy match för "Läkare"
+    // === HIGHLIGHTING & FORMATERING ===
+    { id: 'format-1', type: 'occupation-name', preferred_label: 'Systemutvecklare' },
+    { id: 'format-2', type: 'job-title', preferred_label: 'Frontend-utvecklare', occupation_name_id: 'format-1', occupation_name_preferred_label: 'Systemutvecklare' },
+    // === ANOMALI-METODEN ===
+    // Används för att testa en gradvis minskande score-lista
+    { id: 'gradual-1', type: 'occupation-name', preferred_label: 'Gradvis Ett', weight: 100 },
+    { id: 'gradual-2', type: 'occupation-name', preferred_label: 'Gradvis Två', weight: 90 },
+    { id: 'gradual-3', type: 'occupation-name', preferred_label: 'Gradvis Tre', weight: 80 },
+    { id: 'gradual-4', type: 'occupation-name', preferred_label: 'Gradvis Fyra', weight: 70 },
+];

package/dist/collection/components/job-selector/types.js

@@ -0,0 +1,10 @@
+export class InvalidSelectionError extends Error {
+    code;
+    invalidIds;
+    constructor(message, code, invalidIds) {
+        super(message);
+        this.name = 'InvalidSelectionError';
+        this.code = code;
+        this.invalidIds = invalidIds;
+    }
+}

package/dist/collection/components/job-selector/validation-message.js

@@ -0,0 +1,24 @@
+import { h } from "@stencil/core";
+import { AfValidationMessage } from "../design-compat";
+import { VALIDATION_ERROR_REQUIRED_FIELD, VALIDATION_ERROR_EMPTY_FIELD, POSITIVE_VALIDATION_TEXT } from "./constants";
+export const ValidationMessage = (props) => {
+    const { validation, activeErrorType, errorMessage, errorMessageId } = props;
+    // Positiv validering
+    if (validation === 'success') {
+        return (h(AfValidationMessage, { variant: "success" }, POSITIVE_VALIDATION_TEXT));
+    }
+    // Hantera feltyper
+    if (validation === 'error') {
+        let message = '';
+        switch (activeErrorType) {
+            case 'required':
+                message = errorMessage || VALIDATION_ERROR_REQUIRED_FIELD;
+                break;
+            case 'invalidInput':
+                message = errorMessage || VALIDATION_ERROR_EMPTY_FIELD;
+                break;
+        }
+        return (h(AfValidationMessage, { variant: "error", id: errorMessageId, role: "alert" }, message));
+    }
+    return null;
+};

package/dist/collection/demo-data.js

@@ -0,0 +1,20 @@
+// src/demo-data.ts
+/**
+ * Denna fil fungerar som en tillfällig lokal ersättare för npm-paketet
+ * @taxonomy/job-selector-data under utvecklingsfasen innan v2.0 är släppt.
+ *
+ * Den exporterar samma API-yta som det publika paketet kommer att göra
+ * genom att direktimportera det lokala JSON-datasetet.
+ */
+import fallbackData from "../data/latest.json";
+// Mappa den lokala råfilen till samma struktur som de publika YV-datapaketet.
+export const taxonomyData = fallbackData.data.map((item) => ({
+    id: item.id,
+    type: item.type,
+    preferred_label: item.preferred_label,
+    ssyk_level_4_id: item.ssyk_level_4_id,
+    occupation_name_id: item.occupation_name_id,
+    occupation_name_preferred_label: item.occupation_name_preferred_label,
+    weight: item.weight || 0,
+}));
+export const metadata = fallbackData.metadata;

package/dist/collection/index.js

@@ -0,0 +1,7 @@
+import { registerTaxonomy } from "./components/job-selector/taxonomy-registry";
+export { registerTaxonomy };
+if (typeof window !== 'undefined') {
+    window.registerTaxonomy = registerTaxonomy;
+}
+export { TaxonomySearchEngine } from './components/job-selector/logic/search.engine';
+export { InvalidSelectionError } from './components/job-selector/types';

package/dist/collection/verkstad/verkstad.js

@@ -0,0 +1,407 @@
+/* eslint-disable */
+import { TaxonomySearchEngine, registerTaxonomy } from "/build/index.esm.js";
+async function initVerkstad() {
+    try {
+        const response = await fetch('/assets/taxonomy.json');
+        const data = await response.json();
+        registerTaxonomy(data);
+        console.log('[Verkstad] Taxonomy registered');
+    }
+    catch (e) {
+        console.error('[Verkstad] Failed to register taxonomy', e);
+    }
+}
+initVerkstad();
+let nbEngine = null;
+let nbFlipped = false;
+// Gör dessa tillgängliga globalt för event handlers
+window.toggleFlip = toggleFlip;
+window.toggleOutputFlip = toggleOutputFlip;
+// HJÄLPFUNKTION FÖR ATT RENDERA ETT FLIP-KORT FÖR OUTPUT
+function renderOutputCard(containerId, data, title, type = 'standard') {
+    const container = document.getElementById(containerId);
+    if (!container)
+        return;
+    const cardId = `card-${containerId}`;
+    const prettyJson = JSON.stringify(data, null, 2);
+    let visualization = '';
+    if (type === 'art-deco' && data.metadata?.destinations) {
+        // ART DECO TICKET STUB VISUALIZATION
+        const destinations = data.metadata.destinations.slice(0, 4);
+        visualization = `
+            <div class="ticket-stub">
+                <h3>Resehandling</h3>
+                <div style="font-size: 0.8rem; text-align: center; margin-bottom: 15px;">KUNGLIGA PENDLINGSVERKET</div>
+                
+                <div class="ticket-row">
+                    <span>FRÅN:</span>
+                    <strong>${data.label.toUpperCase()}</strong>
+                </div>
+                
+                <div style="margin: 15px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 10px 0;">
+                    <div style="font-weight: bold; text-align: center; margin-bottom: 5px;">POPULÄRA RESMÅL</div>
+                    ${destinations.map(d => `
+                        <div style="display: flex; justify-content: space-between; font-size: 0.9rem;">
+                            <span>${d.preferred_label}</span>
+                            <span>${d.commuters} st</span>
+                        </div>
+                    `).join('')}
+                </div>
+
+                <div style="font-size: 0.7rem; text-align: center; margin-top: 10px;">
+                    VALID FOR TRAVEL • CLASS I<br>
+                    ${new Date().toLocaleDateString()}
+                </div>
+            </div>
+        `;
+    }
+    else if (data.metadata?.destinations) {
+        // STANDARD LIST VISUALIZATION (Officiell)
+        const topDest = data.metadata.destinations.slice(0, 5);
+        visualization = `
+            <div style="margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; width: 100%;">
+                <div style="font-weight: bold; font-size: 0.9rem; color: #005ed9; margin-bottom: 8px;">TOPP-DESTINATIONER:</div>
+                <table style="width: 100%; font-family: sans-serif; font-size: 0.9rem; border-collapse: collapse;">
+                    ${topDest.map(d => `
+                        <tr style="border-bottom: 1px solid #f0f0f0;">
+                            <td style="padding: 6px 0;">🚶 ${d.preferred_label}</td>
+                            <td style="padding: 6px 0; text-align: right; font-weight: bold;">${d.commuters.toLocaleString('sv-SE')} st</td>
+                        </tr>
+                    `).join('')}
+                </table>
+            </div>
+        `;
+    }
+    else {
+        // GENERIC / FALLBACK VISUALIZATION (Bättre parsing)
+        // Filtrera bort metadata och komplexa objekt för en ren lista
+        const props = Object.entries(data)
+            .filter(([key, val]) => key !== 'metadata' &&
+            typeof val !== 'object' &&
+            val !== null);
+        visualization = `
+            <div style="margin-top: 15px;">
+                <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem; font-family: sans-serif;">
+                    ${props.map(([key, val]) => `
+                        <tr style="border-bottom: 1px solid #eee;">
+                            <td style="padding: 8px 0; color: #666; font-weight: bold; text-transform: uppercase; font-size: 0.75rem;">${key}</td>
+                            <td style="padding: 8px 0; text-align: right; color: #000;">${val}</td>
+                        </tr>
+                    `).join('')}
+                </table>
+                ${data.metadata ? `<div style="margin-top:10px; font-size: 0.8rem; color: #999; font-style: italic;">+ Metadata dold (se Rådata)</div>` : ''}
+            </div>
+        `;
+    }
+    container.innerHTML = `
+        <div id="${cardId}" class="output-card">
+            <div class="output-flipper">
+                <!-- SNYGG FRONT (Active by default) -->
+                <div class="output-front">
+                    <div class="output-header" style="margin-bottom: 5px;">
+                        <span class="output-label">${type === 'art-deco' ? '🛎️ CONCIERGE' : '✨ RESULTAT'}</span>
+                        <button class="toggle-btn" onclick="toggleOutputFlip('${cardId}')">RÅDATA 🔄</button>
+                    </div>
+                    <div style="font-size: 1rem; color: #5d4037; ${type === 'standard' ? 'margin-bottom: 5px;' : ''}">
+                        <strong>VAL:</strong> ${data.label || data.displayLabel || data.preferred_label || data.name || 'Inget valt'}
+                    </div>
+                    ${visualization}
+                </div>
+                <!-- RÅ BACK (Hidden until flipped) -->
+                <div class="output-back">
+                    <div class="output-header">
+                        <span class="output-label">📋 Rå JSON</span>
+                        <button class="toggle-btn" onclick="toggleOutputFlip('${cardId}')">TILLBAKA 🔙</button>
+                    </div>
+                    <pre class="raw-output">${prettyJson}</pre>
+                </div>
+            </div>
+        </div>
+    `;
+}
+function toggleOutputFlip(cardId) {
+    const card = document.getElementById(cardId);
+    if (!card)
+        return;
+    card.classList.toggle('flipped');
+    // HACK: Hantera höjden för 3D-flippen.
+    // Vi byter "position: relative" mellan fram- och baksida beroende på vad som visas.
+    // Detta gör att containern växer med innehållet.
+    const isFlipped = card.classList.contains('flipped');
+    const flipper = card.querySelector('.output-flipper');
+    const front = card.querySelector('.output-front');
+    const back = card.querySelector('.output-back');
+    if (isFlipped) {
+        front.style.position = 'absolute';
+        front.style.visibility = 'hidden'; // Hide to prevent interaction
+        back.style.position = 'relative';
+        back.style.visibility = 'visible';
+    }
+    else {
+        front.style.position = 'relative';
+        front.style.visibility = 'visible';
+        back.style.position = 'absolute';
+        back.style.visibility = 'hidden';
+    }
+}
+// LYSSNA PÅ DEN OFFICIELLA VALJAREN
+setTimeout(() => {
+    const geoOfficial = document.getElementById('geo-official');
+    if (geoOfficial) {
+        console.log('[Verkstad] Lyssnar på geo-official (afGeoSelected)...');
+        geoOfficial.addEventListener('afGeoSelected', (e) => {
+            console.log('[Verkstad] Geo vald:', e.detail);
+            renderOutputCard('geo-official-output', e.detail, 'OFFICIELL', 'standard');
+        });
+    }
+}, 1000);
+// ART DECO CONCIERGE (HEADLESS DEMO)
+let commuteData = [];
+async function initCrazyCommute() {
+    try {
+        const response = await fetch('pendlingskommuner.json');
+        const raw = await response.json();
+        // Omvandla objekt-struktur till sökbar array
+        commuteData = Object.entries(raw.data).map(([id, item]) => ({
+            id: id,
+            label: item.preferred_label,
+            metadata: { destinations: item.destinations }
+        }));
+        console.log('[CrazyCommute] Data laddad och omvandlad.');
+    }
+    catch (e) {
+        console.error('[CrazyCommute] Fel vid laddning:', e);
+    }
+    const crazyInput = document.getElementById('art-deco-input');
+    if (crazyInput) {
+        crazyInput.addEventListener('input', (e) => {
+            const q = e.target.value.trim().toLowerCase();
+            const resDiv = document.getElementById('art-deco-results');
+            resDiv.innerHTML = '';
+            if (q.length < 1 || !commuteData.length) {
+                resDiv.style.display = 'none';
+                return;
+            }
+            resDiv.style.display = 'block';
+            const matches = commuteData.filter(item => item.label && item.label.toLowerCase().includes(q)).slice(0, 4);
+            matches.forEach(m => {
+                const d = document.createElement('div');
+                d.className = 'art-deco-item';
+                d.innerHTML = `${m.label.toUpperCase()}`;
+                d.onclick = () => {
+                    crazyInput.value = m.label;
+                    resDiv.innerHTML = '';
+                    renderOutputCard('art-deco-output', m, 'CONCIERGE', 'art-deco');
+                };
+                resDiv.appendChild(d);
+            });
+        });
+    }
+}
+async function initNeobrutal() {
+    const input = document.getElementById('neobrutal-input');
+    try {
+        console.log('[Neobrutal] Gör oss redo...');
+        if (input)
+            input.placeholder = 'Laddar uppfinningen...';
+        // 1. Hämta datan direkt och registrera den
+        const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+        const url = isLocal ? '/assets/taxonomy.json' : 'https://data.arbetsformedlingen.se/yrke/yrkesvaljaren/info.json';
+        const response = await fetch(url);
+        if (!response.ok)
+            throw new Error('Kunde inte hämta taxonomin');
+        const data = await response.json();
+        registerTaxonomy(data);
+        console.log('[Neobrutal] Data hämtad och registrerad!');
+        // 2. Trigga komponenter att läsa in den nya datan
+        document.querySelectorAll('digi-service-job-selector').forEach(el => {
+            if (el.updateData) {
+                console.log('[Verkstad] Uppdaterar data för:', el.id);
+                el.updateData();
+            }
+        });
+        // 3. Initiera sök-policyn (samma som i webkomponenten)
+        if (typeof TaxonomySearchEngine !== 'function') {
+            throw new Error('TaxonomySearchEngine är inte laddad korrekt från /build/index.esm.js');
+        }
+        nbEngine = new TaxonomySearchEngine(data.data);
+        console.log('[Neobrutal] Motorn är redo.');
+        if (input)
+            input.placeholder = 'VAD SKA DU BLI?';
+    }
+    catch (e) {
+        console.error('[Neobrutal] Oj! Något gick fel vid start:', e);
+        if (input) {
+            input.placeholder = 'KUNDE INTE LADDA MOTORN 404';
+            input.style.backgroundColor = '#ffcdd2';
+        }
+    }
+}
+function selectNbItem(item) {
+    console.log('[Neobrutal] Item selected:', item);
+    document.getElementById('neobrutal-results').innerHTML = '';
+    document.getElementById('neobrutal-input').value = item.label || item.preferred_label;
+    // Använd det enhetliga flipp-kortet istället för rå text
+    renderOutputCard('neobrutal-output-root', item, 'SÖKMASKIN');
+}
+async function toggleFlip() {
+    nbFlipped = !nbFlipped;
+    document.getElementById('neobrutal-root').classList.toggle('flipped', nbFlipped);
+    if (nbFlipped) {
+        console.log('[Neobrutal] Flipped to source. Highlighting...');
+        try {
+            const response = await fetch('verkstad.js');
+            const sourceText = await response.text();
+            const jsDisplay = document.getElementById('display-js');
+            if (jsDisplay) {
+                jsDisplay.textContent = sourceText;
+                if (window.hljs) {
+                    jsDisplay.removeAttribute('data-highlighted');
+                    window.hljs.highlightElement(jsDisplay);
+                }
+            }
+        }
+        catch (e) {
+            console.error("Failed to fetch source", e);
+        }
+    }
+}
+const neobrutalInput = document.getElementById('neobrutal-input');
+if (neobrutalInput) {
+    neobrutalInput.addEventListener('input', (e) => {
+        const query = e.target.value.trim();
+        const resDiv = document.getElementById('neobrutal-results');
+        resDiv.innerHTML = '';
+        if (query.length < 1)
+            return;
+        if (!nbEngine) {
+            console.warn('[Neobrutal] Search engine not ready yet.');
+            return;
+        }
+        // 3. Använd sök-policyn för att få resultat
+        const searchResults = nbEngine.search(query, 3);
+        console.log(`[Neobrutal] Query: "${query}", Results:`, searchResults.length);
+        searchResults.forEach((result) => {
+            const score = result.score?.toFixed(2) || "N/A";
+            const typeCode = (result.type === 'JobTitle' || result.type === 'job-title') ? 'YRK' : 'GRP';
+            const label = result.label || result.preferred_label;
+            const c = document.createElement('div');
+            c.className = 'result-card';
+            c.innerHTML = `
+                <div class="card-header">
+                    <span class="type-badge">${typeCode}</span>
+                    <span class="score-badge">SCR: ${score}</span>
+                </div>
+                <div class="card-body">
+                    <div class="label">${label}</div>
+                </div>
+            `;
+            c.onclick = () => selectNbItem(result);
+            resDiv.appendChild(c);
+        });
+    });
+}
+// INGA SIMULERINGAR HÄR INTE! KODEN BORTTAGEN ENLIGT ORDER.
+async function initCareerExplorer() {
+    const valjare = document.getElementById('breddning-valjare');
+    const resultsContainer = document.getElementById('breddning-results-container');
+    const resultsBox = document.getElementById('breddning-results');
+    let relatedMap = {};
+    try {
+        const response = await fetch('filtrerad-yrkeslikhet-inline.json');
+        const json = await response.json();
+        relatedMap = json.data || {};
+        console.log('[CareerExplorer] Datan laddad. Antal poster:', Object.keys(relatedMap).length);
+    }
+    catch (e) {
+        console.error('[CareerExplorer] Failed to load data:', e);
+    }
+    if (!valjare)
+        return;
+    // Lyssna på valet från komponenten
+    valjare.addEventListener('afJobSelected', (e) => {
+        console.log('[CareerExplorer] afJobSelected:', e.detail);
+        const selection = Array.isArray(e.detail) ? e.detail[0] : e.detail;
+        if (!selection || !selection.conceptId) {
+            resultsContainer.style.display = 'none';
+            return;
+        }
+        showRelated(selection.conceptId);
+    });
+    function showRelated(conceptId) {
+        resultsContainer.style.display = 'block';
+        resultsBox.innerHTML = '';
+        const data = relatedMap[conceptId];
+        if (!data || !data.related || data.related.length === 0) {
+            resultsBox.innerHTML = '<div style="grid-column: 1/-1;">Inga direkta matchningar hittades i denna datamängd. Prova "Butikssäljare" eller "Lagerarbetare".</div>';
+            return;
+        }
+        data.related.slice(0, 6).forEach(rel => {
+            const card = document.createElement('div');
+            // Standard styling
+            card.style.background = '#fff';
+            card.style.border = '1px solid #e0e0e0';
+            card.style.borderRadius = '8px';
+            card.style.padding = '15px';
+            card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)';
+            card.style.transition = 'transform 0.2s';
+            // Hover-effekt
+            card.onmouseover = () => { card.style.transform = 'translateY(-2px)'; card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)'; };
+            card.onmouseout = () => { card.style.transform = 'translateY(0)'; card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)'; };
+            card.innerHTML = `
+                <div style="font-weight:bold; color:#000; font-size: 1.1rem; margin-bottom: 5px;">${rel.label}</div>
+                <div style="font-size:0.8rem; margin-bottom: 5px; color:#666; text-transform: uppercase; letter-spacing: 0.05em;">Kandidat</div>
+            `;
+            resultsBox.appendChild(card);
+        });
+    }
+}
+initCareerExplorer();
+initNeobrutal();
+initCrazyCommute();
+// INITIERA KOMPETENSVÄLJAREN DEMO (NIVÅ 2)
+function initKompetensvaljarenDemo() {
+    const yrkesValjare = document.getElementById('demo-ssyk-valjare');
+    const kompValjare = document.getElementById('demo-komp-valjare');
+    const outputDiv = document.getElementById('komp-output');
+    if (!yrkesValjare || !outputDiv)
+        return;
+    // Lyssna på när användaren väljer ett yrke!
+    yrkesValjare.addEventListener('afJobSelected', (e) => {
+        console.log('[KompetensDemo] afJobSelected:', e.detail);
+        const item = Array.isArray(e.detail) ? e.detail[0] : e.detail;
+        if (item && kompValjare) {
+            // Robust extraction of ID for v2
+            const idToUse = item.occupation_name?.id || item.conceptId || item.ssyk_code_2012 || item.ssyk || '';
+            console.log('[KompetensDemo] Sätter af-ssyk på komp-valjare:', idToUse);
+            kompValjare.setAttribute('af-ssyk', idToUse);
+        }
+        else {
+            outputDiv.innerHTML = 'Inget yrke valt. Prioritering är avstängd.';
+            outputDiv.style.color = '#666';
+            if (kompValjare)
+                kompValjare.setAttribute('af-ssyk', '');
+        }
+    });
+    // GENERIC: Lyssna på ALLA kompetensväljare på sidan (inklusive förvals-demot)
+    document.addEventListener('afKompetensSelected', (e) => {
+        console.log('[KompetensDemo] Event från:', e.target.id || 'anonym kv', e.detail);
+        const items = e.detail;
+        if (items && items.length > 0) {
+            const labels = items.map(i => `<strong>${i.label}</strong> (Id: ${i.id}, Pri: ${i.ssykRank})`).join('<br>');
+            outputDiv.innerHTML = `✅ Valda i ${e.target.getAttribute('af-label') || 'komponent'}:<br>${labels}`;
+            outputDiv.style.color = '#00695c';
+        }
+        else {
+            outputDiv.innerHTML = 'Inga kompetenser valda i den senaste komponenten.';
+            outputDiv.style.color = '#666';
+        }
+    });
+    const preselectedKompValjare = document.getElementById('preselected-komp-valjare');
+    if (preselectedKompValjare) {
+        preselectedKompValjare.componentOnReady().then(() => {
+            preselectedKompValjare.value = ["Gt5f_wdi_FSJ", "D7Ns_RG6_hD2"];
+        });
+    }
+}
+initKompetensvaljarenDemo();

package/dist/components/core-selector.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CoreSelector extends Components.CoreSelector, HTMLElement {}
+export const CoreSelector: {
+    prototype: CoreSelector;
+    new (): CoreSelector;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/core-selector.js

@@ -0,0 +1 @@
+import{C as o,d as r}from"./core-selector2.js";const s=o,e=r;export{s as CoreSelector,e as defineCustomElement}

package/dist/components/core-selector2.js

@@ -0,0 +1 @@
+import{h as e,transformTag as i,proxyCustomElement as t,HTMLElement as s,createEvent as o}from"@stencil/core/internal/client";function a(e,i=!1){if(!e||i)return!1;const t=e.inputValue.trim();return""!==t&&!e.suggestions.some((e=>e.label.toLowerCase()===t.toLowerCase()))}const r={search:'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width:100%;height:100%"><path d="M25.645 22.437l-5.063-5.053a1.22 1.22 0 00-.864-.355h-.827a10.477 10.477 0 002.234-6.487C21.125 4.719 16.397 0 10.562 0 4.729 0 0 4.719 0 10.542c0 5.823 4.728 10.542 10.563 10.542 2.452 0 4.707-.831 6.5-2.23v.826c0 .324.126.633.355.862l5.063 5.053c.477.476 1.25.476 1.721 0l1.437-1.435a1.22 1.22 0 00.006-1.723zm-15.082-5.408c-3.59 0-6.5-2.899-6.5-6.487a6.49 6.49 0 016.5-6.487c3.59 0 6.5 2.899 6.5 6.487a6.49 6.49 0 01-6.5 6.487z" fill="currentColor" fill-rule="nonzero"/></svg>',check:'<svg width="23" height="18" viewBox="0 0 23 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width:100%;height:100%"><path d="M20.547.18L7.315 13.627 2.453 8.686a.597.597 0 00-.853 0L.177 10.132a.62.62 0 000 .868l6.711 6.82c.236.24.618.24.854 0L22.823 2.493a.62.62 0 000-.867L21.4.18a.597.597 0 00-.853 0z" fill="currentColor"/></svg>',x:'<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width:100%;height:100%"><g stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M2 2l7.986 7.986M9.986 2L2 9.986"/></g></svg>'},n=({name:i,class:t})=>e("span",{class:t,"aria-hidden":"true",innerHTML:r[i],style:{display:"flex",width:t?void 0:"12px",height:t?void 0:"12px",minHeight:"1.4em",alignItems:"center"}}),l=({label:i,forId:t,description:s,required:o=!1})=>e("div",{class:"af-form-label"},e("label",{class:"af-form-label__label",htmlFor:t},i,o?" *":""),s&&e("span",{class:"af-form-label__description"},s)),c=({text:i,breakWords:t=!1,onRemove:s})=>e("span",{class:"af-tag"},e("button",{type:"button",class:"af-tag__button","aria-label":`Ta bort ${i}`,onClick:e=>{e.preventDefault(),s()}},e("span",{class:{"af-tag__text":!0,"af-tag__text--break":t}},i),e(n,{name:"x",class:"af-tag__remove-icon"}))),h=(i,t)=>{const s=i.class||"";return e("div",{id:i.id,role:i.role,class:{[s]:!!s}},e("div",{class:{"af-validation-message":!0,[`af-validation-message--${i.variant}`]:!0}},e("span",{class:{"af-validation-message__icon":!0,[`af-validation-message__icon--${i.variant}`]:!0},"aria-hidden":"true"}),e("span",{class:"af-validation-message__text"},t)))},d=t(class i extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.csInput=o(this,"csInput",7),this.csSelect=o(this,"csSelect",7),this.csClear=o(this,"csClear",7),this.csRemoveItem=o(this,"csRemoveItem",7),this.csBlur=o(this,"csBlur",7),this.csEditSelection=o(this,"csEditSelection",7),this.csFocus=o(this,"csFocus",7),this.csLoadMore=o(this,"csLoadMore",7),this.csClearHistory=o(this,"csClearHistory",7),this.csRequestHistory=o(this,"csRequestHistory",7)}historyRequestTimer;disconnectedCallback(){clearTimeout(this.historyRequestTimer),this.historyRequestTimer=void 0}static nextId=0;get hostElement(){return this}state;config={disabled:!1,placeholder:"Sök...",minLength:1,maxResults:10,enableMultiple:!1,showSearchIcon:!0,requireSelection:!0,size:"medium"};label="";labelDescription;componentId="cs-"+i.nextId++;size="medium";csInput;csSelect;csClear;csRemoveItem;csBlur;csEditSelection;csFocus;csLoadMore;csClearHistory;csRequestHistory;afFocused=!1;activeIndex=-1;isFocusedInternal=!1;isNavigatingWithKeyboard=!1;async setFocus(){if(this.inputRef){this.inputRef.focus();const e=this.inputRef.value.length;this.inputRef.setSelectionRange(e,e)}else this.shouldFocusAfterRender=!0}inputRef;listRef;shouldFocusAfterRender=!1;handleKeyDown=e=>{if(this.config.disabled)return void e.preventDefault();if(!this.state)return;if("BUTTON"===e.target.tagName)return;if("ArrowUp"!==e.key&&"ArrowDown"!==e.key&&"Enter"!==e.key&&"Escape"!==e.key&&(this.isNavigatingWithKeyboard=!1),"itemSelected"===this.state.status&&"Tab"!==e.key&&"Shift"!==e.key&&!e.ctrlKey&&!e.metaKey)return void this.csEditSelection.emit();if("searching"!==this.state.status&&"multiSelect"!==this.state.status)return;const i=this.state.suggestions,t=a(this.state,this.config.requireSelection),s=i.length+(t?1:0);switch(e.key){case"ArrowDown":s>0?(e.preventDefault(),this.isNavigatingWithKeyboard=!0,this.activeIndex<s-1&&(this.activeIndex=this.activeIndex+1,this.scrollToActive()),this.activeIndex>=i.length-3&&this.csLoadMore.emit()):this.csFocus.emit();break;case"ArrowUp":s>0&&(e.preventDefault(),this.isNavigatingWithKeyboard=!0,this.activeIndex>0?(this.activeIndex=this.activeIndex-1,this.scrollToActive()):0!==this.activeIndex&&-1!==this.activeIndex||(this.activeIndex=s-1,this.scrollToActive()));break;case" ":case"Enter":if(" "===e.key&&-1===this.activeIndex)return;if(this.activeIndex>=0&&this.activeIndex<i.length){e.preventDefault();const t=i[this.activeIndex];this.shouldFocusAfterRender=!0,t.isSelected?this.csRemoveItem.emit(t):this.csSelect.emit(t)}else t&&this.activeIndex===i.length&&this.isNavigatingWithKeyboard?(e.preventDefault(),this.handleManualSelect()):"Enter"===e.key&&(t||i.length>0)&&(e.preventDefault(),this.isNavigatingWithKeyboard=!0);break;case"Escape":this.activeIndex=-1,this.csClear.emit()}};onWrapperFocusIn=()=>{this.config.disabled||this.state&&this.isFocusedInternal||this.state&&(this.isFocusedInternal=!0,this.activeIndex=-1,this.csFocus.emit(),""===this.state.inputValue.trim()&&this.csRequestHistory.emit())};onWrapperFocusOut=()=>{this.shouldFocusAfterRender||requestAnimationFrame((()=>{const e=this.hostElement.shadowRoot,i=e?.activeElement||document.activeElement;i&&this.hostElement.contains(i)||e&&e.contains(i)||(this.isFocusedInternal=!1,this.activeIndex=-1,this.csBlur.emit())}))};handleAfFocusedChange(e){this.isFocusedInternal=e,e&&(this.shouldFocusAfterRender=!0)}handleConfigChange(e){e.disabled&&(this.isFocusedInternal=!1,this.activeIndex=-1,this.shouldFocusAfterRender=!1)}handleStateChange(e,i){const t=function({activeIndex:e,newState:i,oldState:t,requireSelection:s=!1}){if(t&&i.inputValue!==t.inputValue)return{activeIndex:-1,shouldRestoreFocus:!1};let o=e;"multiSelect"===i.status&&"multiSelect"===t?.status&&i.selectedItems.length>t.selectedItems.length&&(o=0);const r=a(t,s),n=Boolean(t&&r&&e===t.suggestions.length),l=a(i,s),c=i.suggestions.length+(l?1:0);return n?o=l?i.suggestions.length:-1:0===c?o=-1:o>=c&&(o=c-1),{activeIndex:o,shouldRestoreFocus:"itemSelected"===i.status&&"itemSelected"!==t?.status}}({activeIndex:this.activeIndex,newState:e,oldState:i,requireSelection:this.config.requireSelection});this.activeIndex=t.activeIndex,t.shouldRestoreFocus&&(this.shouldFocusAfterRender=!0)}componentDidUpdate(){this.shouldFocusAfterRender&&this.performFocusRestoration()}performFocusRestoration(e=0){if(this.config.disabled)this.shouldFocusAfterRender=!1;else if(this.inputRef){this.isFocusedInternal=!0,this.inputRef.focus();const i=this.hostElement.shadowRoot?.activeElement;if(i===this.inputRef||e>20){const e=this.inputRef.value.length;this.inputRef.setSelectionRange(e,e),this.shouldFocusAfterRender=!1}else requestAnimationFrame((()=>this.performFocusRestoration(e+1)))}}handleScroll(e){if(!this.config.enableInfiniteScroll)return;const i=e.target;i.scrollHeight-(i.scrollTop+i.clientHeight)<50&&this.csLoadMore.emit()}scrollToActive(){if(!this.listRef||!this.state)return;const e=this.listRef.querySelector("#"+(this.activeIndex===this.state.suggestions.length?`${this.componentId}-list-option-manual-input`:`${this.componentId}-list-option-${this.activeIndex}`));e?.scrollIntoView({behavior:"smooth",block:"nearest"})}handleManualSelect(){const e={id:"",label:this.state.inputValue.trim(),metadata:{type:"ManualInput"}};this.shouldFocusAfterRender=!0,this.csSelect.emit(e),this.config.enableMultiple&&""===this.state?.inputValue?.trim()&&this.csRequestHistory.emit()}render(){if(!this.state)return null;const i="itemSelected"===this.state.status;return e("div",{class:{"core-selector-wrapper":!0,"is-disabled":!!this.config.disabled},"aria-disabled":this.config.disabled?"true":"false",onKeyDown:e=>this.handleKeyDown(e),onMouseMove:()=>{this.isNavigatingWithKeyboard=!1},onFocusin:this.onWrapperFocusIn,onFocusout:this.onWrapperFocusOut},this.label&&e(l,{label:this.label,forId:`${this.componentId}-input`,description:this.labelDescription}),this.labelDescription&&e("div",{id:`${this.componentId}-description`,class:"visually-hidden"},this.labelDescription),this.state&&"loading"===this.state.status&&e("div",{class:"loading-indicator"},"Laddar..."),this.state&&"error"===this.state.status&&e("div",{class:"error-message"},this.state.message),this.state&&["searching","itemSelected","multiSelect"].includes(this.state.status)&&e("div",{class:"combobox-container"},this.renderSearchContainer(),this.isFocusedInternal&&!i&&this.renderSuggestionsList()),this.state&&"idle"!==this.state.validation&&"itemSelected"!==this.state.status&&e(h,{id:`${this.componentId}-validation-message`,variant:"error"===this.state.validation?"error":"success",role:"error"===this.state.validation?"alert":void 0,class:"selector-validation-message"},this.state.message))}renderSearchContainer(){const i="itemSelected"===this.state.status,t=i?this.state.selectedItem?.label||"":this.state.inputValue,s="multiSelect"===this.state.status,o=t.length>0,r=s&&this.state.selectedItems.length>0,l=this.state&&(this.state.suggestions.length>0||a(this.state,this.config.requireSelection)),h=this.activeIndex>=0&&this.isNavigatingWithKeyboard?this.activeIndex===this.state.suggestions.length?`${this.componentId}-list-option-manual-input`:`${this.componentId}-list-option-${this.activeIndex}`:void 0,d=`${this.componentId}-validation-message`,g=this.state&&"error"===this.state.validation&&this.state.message,p=[];!!this.labelDescription&&0===t.length&&p.push(`${this.componentId}-description`),g&&p.push(d);const u=p.length>0?p.join(" "):void 0;return e("div",{class:{"search-container":!0,"is-inactive-selected":i,"multi-search-container":s,"has-tags":r,"has-validation-error":"error"===this.state?.validation,"has-positive-validation":!i&&"success"===this.state?.validation},onClick:()=>{this.config.disabled||(i?this.csEditSelection.emit():""===this.state.inputValue.trim()&&this.csRequestHistory.emit())}},s&&this.state.selectedItems.length>0&&e("div",{class:"selected-tags-wrapper"},this.state.selectedItems.map((i=>e(c,{key:i.id,text:i.label,breakWords:!0,onRemove:()=>{this.shouldFocusAfterRender=!0,this.csRemoveItem.emit(i)}})))),e("div",{class:"input-controls-wrapper"},e(n,{name:"search",class:{"search-icon-container":!0,"selector-search-icon":!0,"is-hidden":!this.config.showSearchIcon||o||r}}),e("div",{class:{"input-area":!0,"has-value":!this.config.showSearchIcon||o||r}},i&&e("span",{class:"selected-text-in-box"},t),e("input",{class:{"selector-input-field":!0,"visually-hidden-selected":i},ref:e=>this.inputRef=e,id:`${this.componentId}-input`,type:"text",placeholder:this.config.placeholder,value:t,onInput:e=>{this.config.disabled||(this.isNavigatingWithKeyboard=!1,this.csInput.emit(e.target.value))},autocomplete:"off",role:"combobox","aria-label":this.label,"aria-autocomplete":"list","aria-haspopup":"listbox","aria-expanded":!i&&l&&this.isNavigatingWithKeyboard?"true":"false","aria-controls":!i&&l&&this.isNavigatingWithKeyboard?`${this.componentId}-listbox`:void 0,"aria-activedescendant":h,"aria-invalid":g?"true":"false","aria-describedby":u,readOnly:i,disabled:!!this.config.disabled})),e("button",{type:"button",class:{"clear-button":!0,"is-visible":o||i},tabIndex:o||i?0:-1,disabled:!!this.config.disabled,"aria-label":"Rensa inmatad text",onMouseDown:e=>e.preventDefault(),onClick:()=>{this.config.disabled||(this.csInput.emit(""),this.shouldFocusAfterRender=!0,this.csClear.emit(),this.csRequestHistory.emit())}},e(n,{name:"x"}))))}renderSuggestionsList(){if("itemSelected"===this.state.status)return null;const i=Boolean(this.state.inputValue&&this.state.inputValue.trim().length>0),t=a(this.state,this.config.requireSelection),s=Boolean(this.state.suggestions&&this.state.suggestions.length>0),o=i&&!s&&!t;if(!s&&!t&&!o)return null;const r=this.state.listHeader||this.config.listHeader,l=this.state.showHistoryHeader||this.state.isHistoryView&&this.config.showHistoryHeader;return e("div",{class:"suggestions-box-container"},e("div",{class:"suggestions-box",ref:e=>this.listRef=e,onScroll:e=>this.handleScroll(e)},(r||l)&&e("div",{class:"list-header-container"},e("slot",{name:"suggestions-overlay"}),r&&e("div",{class:"list-header"},e("span",null,r)),l&&e("div",{class:"list-header history-header"},e("span",null,"Din privata historik")," - ",e("button",{type:"button",class:"history-clear-link","aria-label":"Rensa historik",disabled:!!this.config.disabled,onMouseDown:e=>e.preventDefault(),onClick:()=>{this.config.disabled||this.csClearHistory.emit()}},"Rensa"))),!r&&!l&&e("slot",{name:"suggestions-overlay"}),e("div",{id:`${this.componentId}-listbox`,role:"listbox"},o&&e("div",{class:"suggestion-item no-results"},"Inga resultat matchade din sökning"),!o&&this.state.suggestions.map(((i,t)=>e("div",{key:i.id||t,role:"option",id:`${this.componentId}-list-option-${t}`,"aria-selected":!!i.isSelected,"aria-current":t===this.activeIndex?"true":"false",class:{"suggestion-item":!0,"active-suggestion":t===this.activeIndex,"is-selected":!!i.isSelected,"is-keyboard-focus":t===this.activeIndex&&this.isNavigatingWithKeyboard},onMouseDown:e=>{e.preventDefault(),this.config.disabled||(this.shouldFocusAfterRender=!0,i.isSelected?this.csRemoveItem.emit(i):this.csSelect.emit(i),this.config.enableMultiple&&(clearTimeout(this.historyRequestTimer),this.historyRequestTimer=setTimeout((()=>{this.csRequestHistory.emit(),this.historyRequestTimer=void 0}),50)))},onMouseEnter:()=>{this.config.disabled||i.isSelected||(this.activeIndex=t,this.isNavigatingWithKeyboard=!1)}},e(n,{name:"check",class:"selection-indicator-icon"}),e("span",null,i.displaySegments?i.displaySegments.map(((i,t)=>e("span",{key:t,class:{"match-highlight":!!i.isMatch,"metadata-dimmed":!!i.isMetadata}},i.text))):i.label)))),!o&&a(this.state,this.config.requireSelection)&&e("div",{role:"option",id:`${this.componentId}-list-option-manual-input`,class:{"suggestion-item":!0,"active-suggestion":this.activeIndex===this.state.suggestions.length,"is-keyboard-focus":this.activeIndex===this.state.suggestions.length&&this.isNavigatingWithKeyboard},onMouseDown:e=>{e.preventDefault(),this.config.disabled||this.handleManualSelect()},onMouseEnter:()=>{this.config.disabled||(this.activeIndex=this.state.suggestions.length,this.isNavigatingWithKeyboard=!1)}},e("span",null,'Använd "',e("strong",null,this.state.inputValue.trim()),'"')))))}static get delegatesFocus(){return!0}static get watchers(){return{afFocused:[{handleAfFocusedChange:0}],config:[{handleConfigChange:0}],state:[{handleStateChange:0}]}}static get style(){return":host{--digi--grayscale-0:#ffffff;--digi--grayscale-50:#fbfbfb;--digi--grayscale-100:#f4f4f4;--digi--grayscale-200:#ededed;--digi--grayscale-300:#e4e4e4;--digi--grayscale-400:#dddddd;--digi--grayscale-500:#cacaca;--digi--grayscale-600:#acacac;--digi--grayscale-700:#757575;--digi--grayscale-800:#5c5c5c;--digi--grayscale-900:#333333;--digi--grayscale-1000:#000000;--digi--global--color--cta--link--base:#1616b2;--digi--global--color--function--danger--base:#da0000;--digi--global--color--function--success--base:#008a20;--digi--global--color--function--success--lightest-3:#d4edda;--digi--global--color--function--warning--base:#ffe200;--digi--color--text--primary:var(--digi--grayscale-900);--digi--color--text--secondary:var(--digi--grayscale-700);--digi--color--text--link:var(--digi--global--color--cta--link--base);--digi--color--icons--success:var(--digi--global--color--function--success--base);--digi--color--icons--warning:#8a7a00;--digi--color--icons--danger:var(--digi--global--color--function--danger--base);--digi--global--typography--font-family--default:\"Open Sans\", Arial, sans-serif;--digi--global--typography--font-size--base:1rem;--digi--global--typography--font-size--small:0.875rem;--digi--global--typography--font-weight--regular:400;--digi--global--typography--font-weight--semibold:600;--digi--global--typography--font-weight--bold:700;--digi--global--typography--line-height--base:1.5;--digi--typography--label--font-size--desktop:1rem;--digi--typography--label--font-weight--desktop:600;--digi--typography--label--line-height--desktop:1.5;--digi--typography--label-description--font-size--desktop:1rem;--digi--typography--label-description--line-height--desktop:1.5;--digi--typography--tag--font-size--desktop:0.875rem;--digi--gutter--icon:0.625rem;--digi--gutter--smaller:0.75rem;--digi--gutter--small:0.875rem;--digi--gutter--medium:1rem;--digi--border-width--primary:1px;--digi--border-style--primary:solid;--digi--border-radius--primary:0;--digi--border-radius--secondary:6px;--af-tag-color:#091d54;--af-tag-hover-background:#ddf1fc}.af-form-label{color:var(--digi--color--text--primary);display:flex;flex-direction:column;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);margin-bottom:0.5rem}.af-form-label__label{cursor:pointer;display:block;font-weight:var(--digi--typography--label--font-weight--desktop);line-height:var(--digi--typography--label--line-height--desktop)}.af-form-label__description{display:block;font-size:var(--digi--typography--label-description--font-size--desktop);line-height:var(--digi--typography--label-description--line-height--desktop);max-width:35rem}.af-validation-message{align-items:center;display:flex;flex-wrap:wrap}.af-validation-message__icon{flex:0 0 auto;height:1.25em;margin-inline-end:var(--digi--gutter--icon);width:1.25em}.af-validation-message__icon--success,.af-validation-message__icon--error{background-color:var(--af-validation-icon-color, currentColor);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.af-validation-message__icon--success{--af-validation-icon-color:var(--digi--color--icons--success);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z'/%3E%3C/svg%3E\")}.af-validation-message__icon--error{--af-validation-icon-color:var(--digi--color--icons--danger);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M34.4328058,0 C35.5494848,0 36.5900526,0.609146757 37.1483921,1.58958113 L47.5812454,19.9104189 C48.1395849,20.8909496 48.1395849,22.1090504 47.5812454,23.0895811 L37.1483921,41.4104189 C36.5900526,42.3908532 35.5494848,43 34.4328058,43 L13.5671942,43 C12.4505152,43 11.4099474,42.3908532 10.8516079,41.4104189 L0.41875464,23.0895811 C-0.13958488,22.1090504 -0.13958488,20.8909496 0.41875464,19.9104189 L10.8516079,1.58958113 C11.4099474,0.609146757 12.4505152,0 13.5671942,0 Z M18.6736823,12.3728178 C18.2711762,11.964729 17.6203819,11.964729 17.2178757,12.3728178 L15.2825964,14.334939 C14.8800903,14.7430278 14.8800903,15.4028485 15.2825964,15.8109373 L20.6089616,21.2111779 L15.2825964,26.6114185 C14.8800903,27.0195074 14.8800903,27.6793281 15.2825964,28.0874169 L17.2178757,30.049538 C17.6203819,30.4576269 18.2711762,30.4576269 18.6736823,30.049538 L24.0000475,24.6492974 L29.3264127,30.049538 C29.7289188,30.4576269 30.3797132,30.4576269 30.7822193,30.049538 L32.7174986,28.0874169 C33.1200048,27.6793281 33.1200048,27.0195074 32.7174986,26.6114185 L27.3911334,21.2111779 L32.7174986,15.8109373 C33.1200048,15.4028485 33.1200048,14.7430278 32.7174986,14.334939 L30.7822193,12.3728178 C30.3797132,11.964729 29.7289188,11.964729 29.3264127,12.3728178 L24.0000475,17.7730584 Z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M34.4328058,0 C35.5494848,0 36.5900526,0.609146757 37.1483921,1.58958113 L47.5812454,19.9104189 C48.1395849,20.8909496 48.1395849,22.1090504 47.5812454,23.0895811 L37.1483921,41.4104189 C36.5900526,42.3908532 35.5494848,43 34.4328058,43 L13.5671942,43 C12.4505152,43 11.4099474,42.3908532 10.8516079,41.4104189 L0.41875464,23.0895811 C-0.13958488,22.1090504 -0.13958488,20.8909496 0.41875464,19.9104189 L10.8516079,1.58958113 C11.4099474,0.609146757 12.4505152,0 13.5671942,0 Z M18.6736823,12.3728178 C18.2711762,11.964729 17.6203819,11.964729 17.2178757,12.3728178 L15.2825964,14.334939 C14.8800903,14.7430278 14.8800903,15.4028485 15.2825964,15.8109373 L20.6089616,21.2111779 L15.2825964,26.6114185 C14.8800903,27.0195074 14.8800903,27.6793281 15.2825964,28.0874169 L17.2178757,30.049538 C17.6203819,30.4576269 18.2711762,30.4576269 18.6736823,30.049538 L24.0000475,24.6492974 L29.3264127,30.049538 C29.7289188,30.4576269 30.3797132,30.4576269 30.7822193,30.049538 L32.7174986,28.0874169 C33.1200048,27.6793281 33.1200048,27.0195074 32.7174986,26.6114185 L27.3911334,21.2111779 L32.7174986,15.8109373 C33.1200048,15.4028485 33.1200048,14.7430278 32.7174986,14.334939 L30.7822193,12.3728178 C30.3797132,11.964729 29.7289188,11.964729 29.3264127,12.3728178 L24.0000475,17.7730584 Z'/%3E%3C/svg%3E\")}.af-validation-message__icon--warning{background:center / contain no-repeat url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='6.75' fill='%23333'/%3E%3Cpath d='m18 9c0 4.9717-4.0298 9-9 9-4.9702 0-9-4.0283-9-9 0-4.9688 4.0298-9 9-9 4.9702 0 9 4.0312 9 9zm-9 1.8145c-0.92196 0-1.6694 0.7474-1.6694 1.6694 0 0.92196 0.7474 1.6694 1.6694 1.6694s1.6694-0.7474 1.6694-1.6694c0-0.92196-0.7474-1.6694-1.6694-1.6694zm-1.3157-1.065c0.012593 0.23095 0.20355 0.41175 0.43483 0.41175h1.7618c0.23128 0 0.42224-0.1808 0.43483-0.41175l0.2692-4.9355c0.013609-0.24946-0.18501-0.45922-0.43483-0.45922h-2.3002c-0.24982 0-0.4484 0.20976-0.43479 0.45922l0.2692 4.9355z' fill='%23FFE200'/%3E%3C/svg%3E\");position:relative;top:3px}.af-validation-message__text{color:var(--digi--color--text--primary);flex:1;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);transform:translateY(1px)}.af-tag{display:block;max-width:100%;min-width:0}.af-tag__button{align-items:center;background:var(--digi--grayscale-0);border:var(--digi--border-width--primary) var(--digi--border-style--primary) var(--af-tag-color);border-radius:var(--digi--border-radius--secondary);color:var(--af-tag-color);cursor:pointer;display:inline-flex;font-family:var(--digi--global--typography--font-family--default);font-size:0.875rem;font-weight:var(--digi--global--typography--font-weight--semibold);gap:10px;height:auto;max-width:100%;min-height:unset;min-width:0;padding:6px 8px;text-align:left;white-space:normal}.af-tag__button:hover{background:var(--af-tag-hover-background)}.af-tag__button:focus-visible{background:var(--af-tag-hover-background);border-color:var(--af-tag-color);outline:2px solid var(--digi--grayscale-1000);outline-offset:2px;box-shadow:0 0 0 5px var(--digi--grayscale-0)}.af-tag__button:active{background:var(--af-tag-hover-background)}.af-tag__text{display:inline-block;max-width:100%;min-width:0;white-space:normal}.af-tag__text--break{overflow-wrap:anywhere;word-break:break-word}.af-tag__remove-icon{flex:0 0 auto;height:1em;min-height:0 !important;width:1em}:host{--selector-width:var(--cs-width, 100%);--selector-min-width:var(--cs-min-width, 200px);--selector-max-width:var(--cs-max-width, none);--selector-height:var(--cs-height, auto);--selector-min-height:var(--cs-min-height, auto);--selector-max-height:var(--cs-max-height, none);--selector-font-family:var(--global-font-family, 'Open Sans', sans-serif);--selector-font-size:var(--cs-font-size, 1rem);--selector-text-color:var(--cs-text-color, #212529);--selector-placeholder-color:var(--cs-placeholder-color, #6c757d);--selector-border-color:var(--cs-border-color, #d1d5db);--selector-focus-border-color:var(--cs-focus-border-color, #86b7fe);--selector-focus-shadow:var(--cs-focus-shadow, 0 0 0 0.25rem rgba(13, 110, 253, 0.25));--selector-background-color:var(--cs-background-color, #fff);--selector-icon-color:var(--cs-icon-color, #6c757d);--selector-clear-button-color:var(--cs-clear-button-color, #6c757d);--selector-clear-button-hover-color:var(--cs-clear-button-hover-color, #212529);--selector-suggestion-background-color:var(--cs-suggestion-background-color, #fff);--selector-suggestion-border-color:var(--cs-suggestion-border-color, #ced4da);--selector-suggestion-hover-background:var(--cs-suggestion-hover-background, #e9ecef);--selector-suggestion-active-background:var(--cs-suggestion-active-background, #dde4eb);--selector-suggestion-text-color:var(--cs-suggestion-text-color, #212529);--selector-suggestion-highlight-weight:var(--cs-suggestion-highlight-weight, bold);--selector-error-color:var(--cs-error-color, #dc3545);--selector-loading-color:var(--cs-loading-color, #6c757d);--selector-container-min-height:40px;--selector-padding-y:6px;--selector-padding-x:10px;--selector-icon-size:1.1em;--selector-gap:6px;--cs-row-height:32px;display:flex;flex-direction:column;width:var(--selector-width);min-width:var(--selector-min-width);max-width:var(--selector-max-width);height:var(--selector-height);min-height:var(--selector-min-height);max-height:var(--selector-max-height);font-family:var(--selector-font-family);font-size:var(--selector-font-size);color:var(--selector-text-color);position:relative}:host([cs-size=\"small\"]){--selector-container-min-height:32px;--selector-padding-y:2px;--selector-icon-size:1em;--selector-gap:4px;--cs-row-height:28px}:host([cs-size=\"medium\"]){--selector-container-min-height:40px;--selector-padding-y:6px;--cs-row-height:32px}:host([cs-size=\"large\"]){--selector-container-min-height:48px;--selector-padding-y:10px;--selector-icon-size:1.25em;--selector-gap:8px;--cs-row-height:40px}*{box-sizing:border-box}.core-selector-wrapper{display:flex;flex-direction:column;flex:1;min-height:inherit}.af-form-label{margin-bottom:0.5rem}.search-container{display:flex;align-items:center;flex-wrap:wrap;gap:6px;border:1px solid #757575;border-radius:0px;padding:var(--selector-padding-y) var(--selector-padding-x);flex:1;min-height:var(--selector-container-min-height);cursor:text;background-color:var(--selector-background-color);position:relative;overflow:hidden}.search-container:focus-within{outline:2px solid black;outline-offset:2px}.search-container.is-inactive-selected .selector-input-field{caret-color:transparent;cursor:default}.is-inactive-selected+.suggestions-box-container{display:none !important}.search-container.is-inactive-selected .search-icon-container{display:none}.search-container.is-inactive-selected .input-area{padding-left:0}.input-controls-wrapper{position:relative;width:100%;display:flex;align-items:center}.search-icon-container{position:absolute;left:0;top:50%;width:20px;height:20px;transform:translateY(-50%);z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease-in-out, opacity 0.2s ease-in-out;opacity:1;max-height:100%}.search-icon-container.is-hidden{opacity:0;transform:translateY(-50%) scale(0.7)}.selector-search-icon{color:var(--digi--color--icon--primary, #333);display:block;flex:0 0 auto;width:20px;height:20px}.clear-button>span{color:var(--digi--color--icon--primary, #333)}.input-area{flex:1;min-width:0;padding-left:27px;display:flex;align-items:center;transition:padding-left 0.2s ease-in-out}.input-area.has-value{padding-left:0}.selector-input-field{width:100%;font-family:inherit;font-size:var(--selector-font-size);color:inherit;border:none;outline:none;background:transparent;transition:padding-right 0.2s ease-in-out}.search-container.has-input .selector-input-field{padding-right:0}.selector-input-field::placeholder{color:var(--selector-placeholder-color);opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-button{position:static;flex-shrink:0;opacity:0;pointer-events:none;z-index:2;background:none;border:none;padding:0;margin:0;height:20px;width:20px;cursor:pointer;color:var(--selector-clear-button-color);line-height:1;display:flex;align-items:center;transition:color 0.2s ease-in-out, opacity 0.2s ease-in-out}.clear-button.is-visible{opacity:1;pointer-events:auto}.clear-button:hover,.clear-button:focus{color:var(--selector-clear-button-hover-color);outline:none}.search-container.multi-search-container{display:flex;flex-direction:column;gap:0.5rem;align-items:stretch;padding-top:var(--selector-padding-y);padding-bottom:var(--selector-padding-y);width:100%;max-width:100%}.selected-tags-wrapper{display:flex;flex-wrap:wrap;gap:0.5rem;width:100%;max-width:100%;box-sizing:border-box}.selected-tags-wrapper .af-tag{display:block;max-width:100%;min-width:0}.selected-tags-wrapper .af-tag__button{white-space:normal !important;height:auto !important;text-align:left !important;word-break:break-word !important;overflow-wrap:anywhere !important;max-width:100% !important}.search-container.single-value-display{display:flex;align-items:center;flex-wrap:nowrap;gap:0.5rem;min-height:var(--selector-container-min-height);padding:var(--selector-padding-y) var(--selector-padding-x)}.selected-text-in-box{flex-grow:1;white-space:normal;word-break:break-word;min-width:0;line-height:inherit}.search-container.single-value-display .clear-button{position:static;transform:none;opacity:1;pointer-events:auto;flex-shrink:0}.combobox-container{position:relative;margin-top:0;display:flex;flex-direction:column;flex:1}.suggestions-box-container{position:absolute;top:100%;left:0;right:0;z-index:100}.suggestions-box-container.is-hidden-list{z-index:101;pointer-events:none}.suggestions-box{position:relative;background-color:white;border:1px solid var(--selector-suggestion-border-color);border-radius:4px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);overflow-y:auto;margin:2px 0px;max-height:calc(var(--max-visible-rows, 10) * var(--cs-row-height) + 40px)}.suggestion-item{display:flex;align-items:center;min-height:var(--cs-row-height);height:auto;padding:6px 1rem;font-size:inherit;line-height:1.25;cursor:pointer;color:var(--selector-suggestion-text-color);list-style:none;transition:background-color 0.15s ease, color 0.15s ease;white-space:normal !important;word-break:break-word !important;overflow-wrap:anywhere !important;position:relative;z-index:1;box-sizing:border-box}.suggestion-item>span{transition:font-weight 0.2s ease, transform 0.2s ease;display:inline;vertical-align:middle;white-space:normal;word-break:break-word;overflow-wrap:anywhere}.suggestion-item:hover,.suggestion-item.active-suggestion{background-color:var(--selector-suggestion-active-background)}.suggestion-item.active-suggestion.is-keyboard-focus{outline:1px solid black;outline-offset:-1px}.suggestion-item.is-selected{color:var(--selector-suggestion-text-color) !important;cursor:default;background-color:#f2f2f2 !important}.suggestion-item.is-selected span{font-weight:600}.selection-indicator-icon{width:0;height:20px;opacity:0;transform:scale(0.5);margin-right:0;transition:width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),                  opacity 0.2s ease,                  transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),                 margin-right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);color:var(--digi--grayscale-800, #333);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.suggestion-item.is-selected .selection-indicator-icon{width:24px;opacity:1;transform:scale(1);margin-right:8px}.suggestion-item.is-selected.active-suggestion{background-color:#f2f2f2 !important}.suggestion-item .suggestion-text strong,.suggestion-item .match-highlight{font-weight:var(--selector-suggestion-highlight-weight);color:inherit;display:inline}.metadata-dimmed,.occupation-variant-label{font-size:1rem;color:var(--digi--grayscale-700, #757575);margin-left:0.25rem;display:inline;vertical-align:baseline;line-height:inherit;white-space:normal}.suggestion-item.no-results{color:var(--selector-placeholder-color);cursor:default;padding:0.5rem 1rem;font-style:italic;text-align:center;height:auto}.search-container.has-validation-error{border-color:var(--selector-error-color);border-width:2px;background-color:#fef3f2}.search-container.has-positive-validation{border-color:#155724;background-color:#d4edda}.status-message{margin-top:0.5rem}.selector-validation-message{margin-top:0.5rem;display:block}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none;display:none}input::-ms-clear{display:none;width:0;height:0}.list-header-container{position:sticky;top:0;z-index:10;background-color:#f8f9fa;border-bottom:1px solid var(--selector-suggestion-border-color);min-height:auto;display:flex;flex-direction:column}.list-header-container ::slotted([slot=\"suggestions-overlay\"]){position:absolute !important;top:0;left:0;width:100%;height:100%;z-index:20}.suggestions-box>::slotted([slot=\"suggestions-overlay\"]){position:sticky !important;top:0;left:0;width:100%;z-index:20}.list-header{display:flex;align-items:center;min-height:var(--cs-row-height);padding:6px 1rem;font-size:0.875rem;line-height:1.25;color:var(--digi--grayscale-700, #757575);border-bottom:1px solid var(--selector-suggestion-border-color, #ced4da)}.list-header span{font-size:0.875rem;font-weight:normal}.history-clear-link{color:var(--digi--grayscale-700, #757575);text-decoration:underline;cursor:pointer;margin-left:0.25rem;background:transparent;border:0;padding:0;font:inherit}.history-clear-link:hover{color:var(--digi--grayscale-900, #222)}@keyframes cs-shrink-fade{from{opacity:1}to{opacity:1}}@keyframes cs-collapse{from{height:auto}to{height:auto}}.cs-toast{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;display:flex;align-items:center;justify-content:center;gap:8px;background-color:#f8fdf0;animation:cs-toastSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;pointer-events:none;box-sizing:border-box}.cs-toast.is-closing{animation:cs-toastSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards}.cs-toast-text{margin:0;font-size:0.875rem;font-weight:500;color:#2e7d32}@keyframes cs-toastSlideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cs-toastSlideUp{from{transform:translateY(0)}to{transform:translateY(-100%)}}.selector-input-field.visually-hidden-selected{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}"}},[785,"core-selector",{state:[16],config:[16],label:[1],labelDescription:[1,"label-description"],componentId:[1,"component-id"],size:[513,"cs-size"],afFocused:[4,"af-focused"],activeIndex:[32],isFocusedInternal:[32],isNavigatingWithKeyboard:[32],setFocus:[64]},void 0,{afFocused:[{handleAfFocusedChange:0}],config:[{handleConfigChange:0}],state:[{handleStateChange:0}]}]);function g(){"undefined"!=typeof customElements&&["core-selector"].forEach((e=>{"core-selector"===e&&(customElements.get(i(e))||customElements.define(i(e),d))}))}g();export{h as A,d as C,g as d}

package/dist/components/digi-service-job-selector.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DigiServiceJobSelector extends Components.DigiServiceJobSelector, HTMLElement {}
+export const DigiServiceJobSelector: {
+    prototype: DigiServiceJobSelector;
+    new (): DigiServiceJobSelector;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/digi-service-job-selector.js

@@ -0,0 +1 @@
+import{J as o,d as s}from"./job-selector.js";const r=o,t=s;export{r as DigiServiceJobSelector,t as defineCustomElement}