@arbetsformedlingen/yrkesvaljaren 2.0.5

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

@@ -0,0 +1,1378 @@
+import { h, Fragment } from "@stencil/core";
+import { JobSelectorController } from "./job-selector-controller";
+import { InvalidSelectionError, } from "./types";
+import { getRegisteredTaxonomy, isTaxonomyRegistration, registerTaxonomy } from "./taxonomy-registry";
+import { MIN_INPUT_LENGTH, PLACEHOLDER_TEXT, } from "./constants";
+import { styleParentheticalText } from "./search.utils";
+import { AfValidationMessage } from "../design-compat";
+import log from "loglevel";
+if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test') {
+    log.setLevel(log.levels.SILENT);
+}
+else {
+    log.setLevel(log.levels.DEBUG);
+}
+const YV_LATEST_DATA_URL = 'https://d3hng02m5bee8m.cloudfront.net/yrkesvaljaren/latest.json';
+const CONCEPT_ID_PATTERN = /^[123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ]{4}_[123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ]{3}_[123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ]{3}$/;
+export class JobSelector {
+    hostElement;
+    internals;
+    /**
+     * HTML-formulärets fältnamn. Följer standardattributet `name`, på samma sätt som
+     * `<input name="...">`, och används som nyckel när värdet läses via `FormData`.
+     */
+    name = 'yrkesvaljaren';
+    /**
+     * Fullständig, explicit URL till en egenhostad datafil.
+     * Utelämna attributet för att använda senaste data automatiskt.
+     */
+    taxonomyUrl;
+    placeholder = PLACEHOLDER_TEXT;
+    label = 'Välj yrke';
+    /** Om satt till true kan väljaren inte användas med mus eller tangentbord. */
+    disabled = false;
+    enableMultiple = false;
+    showSearchIcon = true;
+    errorMessage;
+    labelDescription;
+    /** Om satt till `true` måste fältet ha ett värde för att vara giltigt. */
+    required = false;
+    /** Om satt till `true` tillåts fritext som inte finns i taxonomin. */
+    manualInput = false;
+    /**
+     * Aktiverar historiken.
+     * Använder Local Storage för att spara valda yrken i webbläsaren.
+     * Integritet: Data lagras bara lokalt i webbläsaren.
+     * Räckvidd: Historiken delas mellan sidor på samma domän.
+     */
+    history = true;
+    /**
+     * Om satt till true visas populära yrken initialt när historiken är tom.
+     */
+    popular = true;
+    // Interna konstanter och inställningar som inte exponeras för klienten
+    maxHistoryItems = 10;
+    enableSelectionAnimation = false;
+    afFocused = false;
+    populateInputOnSelect = false;
+    maxVisibleRows;
+    minLength = MIN_INPUT_LENGTH;
+    maxResults = 10;
+    get requireSelection() {
+        return !this.manualInput;
+    }
+    /**
+     * Storleken på inputfältet.
+     * 'small' | 'medium' | 'large'
+     */
+    size = 'medium';
+    constructor() {
+        log.debug('[JobSelector] Constructor - enableMultiple:', this.enableMultiple);
+    }
+    state = { status: 'loading' };
+    /**
+     * Spårar vilken typ av fel som är aktivt,
+     * för att kunna visa rätt meddelande.
+     */
+    activeErrorType = null;
+    animatingItemId = null;
+    animationTimer;
+    cloneSelection(selection) {
+        return selection.map((item) => item.id === null
+            ? { ...item }
+            : {
+                ...item,
+                related: item.related ? { ...item.related } : undefined,
+            });
+    }
+    rebuildValidJobIds() {
+        const taxonomyData = this.controller?.getTaxonomyData?.() ?? this.taxonomyData ?? [];
+        this.validJobIds = new Set(taxonomyData.map((item) => item.id).filter(Boolean));
+    }
+    validateSelectionCandidate(candidate) {
+        const values = typeof candidate === 'string'
+            ? [candidate]
+            : Array.isArray(candidate)
+                ? candidate
+                : null;
+        if (!values) {
+            return { ok: false, reason: 'invalid-input' };
+        }
+        const hasStrings = values.some((item) => typeof item === 'string');
+        const hasObjects = values.some((item) => typeof item === 'object' && item !== null);
+        if ((hasStrings && hasObjects) || values.some((item) => typeof item !== 'string' && (typeof item !== 'object' || item === null))) {
+            return { ok: false, reason: 'invalid-input' };
+        }
+        const selection = [];
+        const taxonomyIds = [];
+        const manualLabels = [];
+        for (const item of values) {
+            if (typeof item === 'string') {
+                const value = item.trim();
+                if (!value) {
+                    return { ok: false, reason: 'invalid-input' };
+                }
+                if (CONCEPT_ID_PATTERN.test(value)) {
+                    taxonomyIds.push(value);
+                    selection.push({ id: value });
+                }
+                else {
+                    if (!this.manualInput) {
+                        return { ok: false, reason: 'manual-input-disabled' };
+                    }
+                    manualLabels.push(value);
+                    selection.push({ type: 'manual-input', id: null, preferred_label: value });
+                }
+                continue;
+            }
+            if (!item || typeof item !== 'object') {
+                return { ok: false, reason: 'invalid-input' };
+            }
+            const candidateItem = item;
+            if (typeof candidateItem.id === 'string') {
+                const id = candidateItem.id.trim();
+                if (!id
+                    || (candidateItem.type !== 'job-title'
+                        && candidateItem.type !== 'occupation-name')
+                    || typeof candidateItem.preferred_label !== 'string'
+                    || !candidateItem.preferred_label.trim()) {
+                    return { ok: false, reason: 'invalid-input' };
+                }
+                if (candidateItem.related !== undefined) {
+                    const related = candidateItem.related;
+                    if (!related
+                        || related.type !== 'occupation-name'
+                        || typeof related.id !== 'string'
+                        || !related.id.trim()
+                        || typeof related.preferred_label !== 'string'
+                        || !related.preferred_label.trim()) {
+                        return { ok: false, reason: 'invalid-input' };
+                    }
+                }
+                taxonomyIds.push(id);
+                selection.push({ id });
+            }
+            else if (candidateItem.id === null && candidateItem.type === 'manual-input') {
+                if (typeof candidateItem.preferred_label !== 'string' || !candidateItem.preferred_label.trim()) {
+                    return { ok: false, reason: 'invalid-input' };
+                }
+                if (!this.manualInput) {
+                    return { ok: false, reason: 'manual-input-disabled' };
+                }
+                const label = candidateItem.preferred_label.trim();
+                manualLabels.push(label);
+                selection.push({ type: 'manual-input', id: null, preferred_label: label });
+            }
+            else {
+                return { ok: false, reason: 'invalid-input' };
+            }
+        }
+        if (!this.enableMultiple && selection.length > 1) {
+            return { ok: false, reason: 'multiple-disabled' };
+        }
+        if (new Set(taxonomyIds).size !== taxonomyIds.length) {
+            return { ok: false, reason: 'duplicate-taxonomy-id' };
+        }
+        if (new Set(manualLabels).size !== manualLabels.length) {
+            return { ok: false, reason: 'duplicate-manual-label' };
+        }
+        const invalidIds = taxonomyIds.filter((id) => !this.validJobIds.has(id));
+        if (invalidIds.length > 0) {
+            return { ok: false, reason: 'unknown-id', invalidIds };
+        }
+        return { ok: true, selection };
+    }
+    describeSelectionRejection(rejection) {
+        switch (rejection.reason) {
+            case 'invalid-input':
+                return 'setSelection accepterar en sträng, en homogen strängarray eller en array med fullständiga JobSelectionItem-objekt.';
+            case 'data-unavailable':
+                return 'setSelection kan inte användas eftersom yrkesdata inte kunde laddas.';
+            case 'duplicate-taxonomy-id':
+                return 'selection får inte innehålla dubbla taxonomi-id:n.';
+            case 'duplicate-manual-label':
+                return 'selection får inte innehålla dubbla manuella labels.';
+            case 'multiple-disabled':
+                return 'flera värden kräver af-enable-multiple="true".';
+            case 'manual-input-disabled':
+                return 'manual-val kräver af-manual-input="true".';
+            case 'unknown-id':
+                return `okända Concept ID:n: ${rejection.invalidIds?.join(', ')}`;
+        }
+    }
+    errorCodeForRejection(reason) {
+        switch (reason) {
+            case 'unknown-id':
+                return 'unknown-id';
+            case 'manual-input-disabled':
+                return 'manual-input-disabled';
+            case 'multiple-disabled':
+                return 'multiple-disabled';
+            default:
+                return 'invalid-input';
+        }
+    }
+    rejectSelection(candidate, rejection) {
+        const message = this.describeSelectionRejection(rejection);
+        console.error(`[Yrkesväljaren] Ogiltig selection: ${message} Värdet accepterades inte; senaste giltiga val behålls.`, { selection: candidate, previousSelection: this.lastAcceptedSelection });
+        this.activeErrorType = 'invalidInput';
+        this.validationChangeEmitter.emit({ isValid: false, errorType: 'invalidInput' });
+        this.updateValidity(false);
+        return new InvalidSelectionError(message, this.errorCodeForRejection(rejection.reason), rejection.invalidIds);
+    }
+    syncAcceptedSelection(selection) {
+        const nextSelection = this.cloneSelection(selection);
+        this.lastAcceptedSelection = nextSelection;
+        if (this.activeErrorType === 'invalidInput') {
+            const hasAcceptedSelection = nextSelection.length > 0;
+            const isValid = hasAcceptedSelection || !this.required;
+            const errorType = isValid ? null : 'required';
+            this.activeErrorType = errorType;
+            this.validationChangeEmitter.emit({ isValid, errorType });
+            this.updateValidity(isValid);
+        }
+    }
+    applySelection(candidate) {
+        if (!this.controller) {
+            throw this.rejectSelection(candidate, { ok: false, reason: 'data-unavailable' });
+        }
+        const validation = this.validateSelectionCandidate(candidate);
+        if (!validation.ok) {
+            throw this.rejectSelection(candidate, validation);
+        }
+        const result = this.controller.setSelection(validation.selection);
+        if (!result.ok) {
+            throw this.rejectSelection(candidate, { ok: false, reason: 'unknown-id', invalidIds: result.invalidIds });
+        }
+        this.syncAcceptedSelection(result.selection);
+        return this.cloneSelection(result.selection);
+    }
+    watchRequired(newValue) {
+        this.controller.updateConfig({ required: newValue });
+    }
+    watchManualInput(newValue) {
+        this.controller.updateConfig({ requireSelection: !newValue });
+    }
+    watchHistory(newValue) {
+        this.controller.updateConfig({ history: newValue });
+    }
+    watchPopular(newValue) {
+        this.controller.updateConfig({ popular: newValue });
+    }
+    watchEnableMultiple(newValue) {
+        this.controller.updateConfig({ enableMultiple: newValue });
+    }
+    watchDisabled(newValue) {
+        if (newValue)
+            this.afFocused = false;
+    }
+    watchTaxonomyData(newValue) {
+        if (this.controller && newValue && newValue.length > 0) {
+            this.controller.initialize(newValue).then(() => {
+                this.rebuildValidJobIds();
+                this.restoreAcceptedSelectionAfterDataUpdate();
+            });
+        }
+    }
+    /**
+     * Yrkesdata (taxonomi). Kan injiceras av integratören för deterministisk laddning (t.ex. i testmiljöer).
+     * Om den lämnas tom populeras den internt via det globala registret eller auto-fetch för att exponera aktuell data.
+     */
+    taxonomyData = [];
+    afJobSelectedEmitter;
+    syncFormValue() {
+        if (!this.state)
+            return;
+        if (this.enableMultiple) {
+            const selected = (this.state.status === 'multiSelect' || this.state.status === 'multiSelectShowingHistory')
+                ? this.state.selectedItems
+                : [];
+            const formData = new FormData();
+            selected.forEach(item => {
+                formData.append(this.name, item.id || item.rawLabel);
+            });
+            this.internals.setFormValue(formData);
+        }
+        else {
+            const selected = this.state.status === 'itemSelected' ? this.state.selectedItem : null;
+            this.internals.setFormValue(selected ? selected.id || selected.rawLabel : null);
+        }
+    }
+    handleFormValidationSync(event) {
+        this.updateValidity(event.detail.isValid);
+    }
+    dataLoadFailedEmitter;
+    validationChangeEmitter;
+    static nextId = 0;
+    componentId = `job-selector-${JobSelector.nextId++}`;
+    observer;
+    controller;
+    validJobIds = new Set();
+    lastAcceptedSelection = [];
+    restoreAcceptedSelectionAfterDataUpdate() {
+        if (this.lastAcceptedSelection.length === 0) {
+            return;
+        }
+        const result = this.controller.setSelection(this.lastAcceptedSelection);
+        if (result.ok) {
+            this.syncAcceptedSelection(result.selection);
+            return;
+        }
+        this.rejectSelection(this.lastAcceptedSelection, {
+            ok: false,
+            reason: 'unknown-id',
+            invalidIds: result.invalidIds,
+        });
+    }
+    // --- LIVSCYKEL-METODER ---
+    async componentWillLoad() {
+        log.setLevel(log.levels.WARN);
+        // Använd registrerad data om den finns. Annars används en explicit URL
+        // eller senaste publicerade data.
+        const registeredData = getRegisteredTaxonomy();
+        const hasData = (this.taxonomyData && this.taxonomyData.length > 0) || (registeredData && registeredData.length > 0);
+        if (!hasData) {
+            this.state = { status: 'loading' };
+            try {
+                const dataUrl = this.taxonomyUrl ?? YV_LATEST_DATA_URL;
+                log.debug(`[JobSelector] Hämtar yrkesdata från: ${dataUrl}`);
+                const response = await fetch(dataUrl);
+                if (!response.ok) {
+                    throw new Error(`Kunde inte ladda yrkesdata från ${dataUrl}: ${response.status} ${response.statusText}`);
+                }
+                const data = await response.json();
+                if (!isTaxonomyRegistration(data)) {
+                    throw new Error('Yrkesdatan har ett ogiltigt format.');
+                }
+                registerTaxonomy(data);
+                log.debug('[JobSelector] Data-laddning lyckades.');
+            }
+            catch (error) {
+                log.error('[JobSelector] Fel vid data-laddning:', error);
+                this.state = { status: 'error', message: 'Kunde inte ladda yrkesdata.' };
+                this.dataLoadFailedEmitter.emit({ error: error instanceof Error ? error : new Error(String(error)) });
+                return;
+            }
+        }
+        this.controller = new JobSelectorController({
+            onStateChange: (state) => {
+                this.state = { ...state };
+                this.syncFormValue();
+            },
+            onEmitSelection: (selection) => {
+                const nextSelection = selection
+                    ? (Array.isArray(selection) ? selection : [selection])
+                    : [];
+                this.syncAcceptedSelection(nextSelection);
+                this.afJobSelectedEmitter.emit(nextSelection);
+            },
+            onEmitValidation: (payload) => {
+                this.activeErrorType = payload.errorType;
+                this.validationChangeEmitter.emit(payload);
+            },
+            onEmitDataLoadFailed: (error) => { this.dataLoadFailedEmitter.emit({ error }); },
+            onEmitStatusChange: () => { },
+        }, {
+            enableMultiple: this.enableMultiple,
+            required: this.required,
+            requireSelection: this.requireSelection,
+            history: this.history,
+            popular: this.popular,
+            maxHistoryItems: this.maxHistoryItems,
+            minLength: this.minLength,
+            maxResults: this.maxResults,
+        });
+        // Initialisera controller (den läser in data från registret eller använder injicerad data)
+        await this.controller.initialize(this.taxonomyData);
+        this.taxonomyData = this.controller.getTaxonomyData();
+        this.rebuildValidJobIds();
+        // Sätt initial valideringsstatus för FACE
+        if (this.activeErrorType === 'invalidInput') {
+            this.updateValidity(false);
+        }
+        else if (this.required && this.lastAcceptedSelection.length === 0) {
+            this.internals.setValidity({ customError: true }, this.errorMessage || 'Välj ett yrke från listan.');
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    componentDidLoad() {
+        this.handleHashFocus();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.controller) {
+            this.controller.destroy();
+        }
+        clearTimeout(this.animationTimer);
+        this.animationTimer = undefined;
+    }
+    handleHashFocus() {
+        const hash = window.location.hash;
+        if (!hash)
+            return;
+        const targetId = hash.substring(1);
+        const hostId = this.hostElement.getAttribute('id');
+        if (hostId && targetId === hostId) {
+            this.setFocus();
+            this.hostElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            history.replaceState(null, '', window.location.pathname + window.location.search);
+        }
+    }
+    // --- ANVÄNDARINTERAKTIONER OCH LOGIK (Delegerat till Controller via CoreSelector events) ---
+    handleInput(event) {
+        this.afFocused = true;
+        this.controller.handleInput(event.detail);
+    }
+    handleCsSelect(event) {
+        this.afFocused = true;
+        const genericItem = event.detail;
+        if (this.enableSelectionAnimation) {
+            this.animatingItemId = genericItem.id;
+            clearTimeout(this.animationTimer);
+            this.animationTimer = setTimeout(() => {
+                this.animatingItemId = null;
+                this.animationTimer = undefined;
+            }, 600);
+        }
+        // Hämta originalobjektet från metadata om det finns, annars bygg ett baserat på genericItem
+        const originalItem = genericItem.metadata?.original;
+        if (originalItem && 'displayLabel' in originalItem) {
+            this.controller.selectItem(originalItem);
+        }
+        else {
+            // Fallback för manuell inmatning eller om metadata saknas
+            if (genericItem.metadata?.type === 'ManualInput') {
+                this.controller.handleFreeTextSelection(genericItem.label);
+            }
+            else {
+                // Detta borde inte hända med data från suggestions, men för säkerhets skull
+                const searchResult = {
+                    id: genericItem.id,
+                    type: 'unknown',
+                    preferred_label: genericItem.label,
+                    rawLabel: genericItem.label,
+                    displayLabel: genericItem.label,
+                    highlightedLabel: genericItem.highlightedLabel || genericItem.label,
+                    score: 1.0
+                };
+                this.controller.selectItem(searchResult);
+            }
+        }
+    }
+    handleCsClear() {
+        this.controller.resetSearch();
+    }
+    handleCsClearHistory() {
+        this.controller.clearHistory();
+    }
+    handleCsRequestHistory() {
+        this.controller.showHistory();
+    }
+    handleCsLoadMore() {
+        this.controller.loadMore();
+    }
+    handleCsRemoveItem(event) {
+        const genericItem = event.detail;
+        const originalItem = genericItem.metadata?.original;
+        if (originalItem && 'displayLabel' in originalItem) {
+            this.controller.removeItem(originalItem);
+        }
+    }
+    handleCsFocus() {
+        this.afFocused = true;
+        this.controller.handleFocus();
+    }
+    handleCsBlur() {
+        this.afFocused = false;
+        this.controller.handleBlur();
+        this.validate(); // Ensure events are emitted on blur
+    }
+    handleCsEditSelection() {
+        this.afFocused = true;
+        this.controller.editSelection();
+    }
+    /**
+     * Uppdaterar taxonomidatan genom att läsa om från registret.
+     * Används efter att registerTaxonomy() har anropats med ny data.
+     */
+    async updateData() {
+        log.debug('[JobSelector] updateData called');
+        await this.controller.initialize();
+        this.taxonomyData = this.controller.getTaxonomyData();
+        this.rebuildValidJobIds();
+        this.restoreAcceptedSelectionAfterDataUpdate();
+    }
+    /**
+     * Sätter ett programatiskt val och returnerar YV:s normaliserade, rika selection.
+     * Strängar som matchar Concept ID-formatet tolkas som taxonomi-id:n; övriga som fritext.
+     */
+    async setSelection(input) {
+        return this.applySelection(input);
+    }
+    async setFocus() {
+        const coreSelector = this.hostElement.shadowRoot?.querySelector('core-selector');
+        if (coreSelector && typeof coreSelector.setFocus === 'function') {
+            await coreSelector.setFocus();
+        }
+    }
+    /**
+     * Validerar komponenten manuellt.
+     * @param forceTouch - Om true, tvingas valideringsfel att visas även om användaren inte interagerat med fältet.
+     */
+    async validate(forceTouch = false) {
+        const isValid = await this.controller.runValidation(forceTouch);
+        this.updateValidity(isValid);
+        return isValid;
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidity() {
+        return this.internals.validity;
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    updateValidity(isValid) {
+        if (!isValid) {
+            const message = this.activeErrorType === 'invalidInput'
+                ? this.errorMessage || 'Komponenten har fått ett ogiltigt värde.'
+                : this.errorMessage || 'Välj ett yrke från listan.';
+            this.internals.setValidity({ customError: true }, message);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    // --- MAPPING HELPERS ---
+    _mapSearchResultToGenericItem(item) {
+        const isSelectedResult = this.enableMultiple
+            ? (this.state.status === 'multiSelect' || this.state.status === 'multiSelectShowingHistory') &&
+                this.state.selectedItems.some(si => {
+                    if (si.id && item.id)
+                        return si.id === item.id;
+                    return si.rawLabel === item.rawLabel;
+                })
+            : this.state.status === 'itemSelected' && this.state.selectedItem?.id === item.id;
+        return {
+            id: item.id,
+            label: item.displayLabel, // Use the formatted label
+            isSelected: this.animatingItemId === item.id || isSelectedResult,
+            highlightedLabel: item.highlightedLabel,
+            displaySegments: item.displaySegments, // Pass structured segments
+            group: item.type === 'occupation-name' ? 'Yrkesgrupper' : 'Yrkesbenämningar',
+            metadata: {
+                original: item // Store the full object for retrieval
+            }
+        };
+    }
+    _mapStateToSelectorState(componentState) {
+        let coreStatus = 'loading';
+        let inputValue = '';
+        let suggestions = [];
+        let selectedItem;
+        let selectedItems = [];
+        let validation = 'idle';
+        let message = this.errorMessage || '';
+        let validationContext = undefined;
+        let listHeader;
+        let showHistoryHeader;
+        // Map Validation
+        if ('validation' in componentState && componentState.validation) {
+            validation = componentState.validation;
+            if (componentState.validation === 'error') {
+                if (this.activeErrorType === 'required') {
+                    message = this.errorMessage || 'Välj ett yrke från listan.';
+                }
+                else if (this.activeErrorType === 'invalidInput') {
+                    message = this.errorMessage || 'Välj ett yrke från listan.';
+                }
+                else if (this.errorMessage) {
+                    message = this.errorMessage;
+                }
+            }
+            else if (componentState.validation === 'success') {
+                message = 'Tack!';
+            }
+        }
+        if ('message' in componentState && componentState.message) {
+            message = componentState.message;
+        }
+        if ('validationContext' in componentState) {
+            validationContext = componentState.validationContext;
+        }
+        // Map Status & Data
+        switch (componentState.status) {
+            case 'loading':
+                coreStatus = 'loading';
+                break;
+            case 'error':
+                coreStatus = 'error';
+                break;
+            case 'searching':
+                coreStatus = 'searching';
+                inputValue = componentState.inputValue;
+                suggestions = componentState.suggestions.map(s => this._mapSearchResultToGenericItem(s));
+                break;
+            case 'showingHistory':
+                coreStatus = 'searching';
+                inputValue = componentState.inputValue || '';
+                suggestions = componentState.historyItems.map(s => this._mapSearchResultToGenericItem(s));
+                break;
+            case 'itemSelected':
+                coreStatus = 'itemSelected';
+                selectedItem = this._mapSearchResultToGenericItem(componentState.selectedItem);
+                selectedItem.highlightedLabel = styleParentheticalText(selectedItem.label);
+                inputValue = componentState.inputValue || '';
+                break;
+            case 'multiSelect':
+                coreStatus = 'multiSelect';
+                inputValue = componentState.inputValue;
+                suggestions = componentState.suggestions.map(s => this._mapSearchResultToGenericItem(s));
+                selectedItems = componentState.selectedItems.map(s => this._mapSearchResultToGenericItem(s));
+                break;
+            case 'multiSelectShowingHistory':
+                coreStatus = 'multiSelect';
+                inputValue = componentState.inputValue || '';
+                suggestions = componentState.historyItems.map(s => this._mapSearchResultToGenericItem(s));
+                selectedItems = componentState.selectedItems.map(s => this._mapSearchResultToGenericItem(s));
+                break;
+        }
+        const isHistoryView = componentState.status === 'showingHistory' || componentState.status === 'multiSelectShowingHistory';
+        if (coreStatus === 'multiSelect' || coreStatus === 'itemSelected' || coreStatus === 'searching') {
+            // 1. Hide already selected items from the dropdown (YV specific requirement)
+            if (selectedItems.length > 0) {
+                suggestions = suggestions.filter(s => {
+                    return !selectedItems.some(si => (si.id && s.id) ? si.id === s.id : si.label === s.label);
+                });
+            }
+            // 1. Set dynamic list header
+            if (isHistoryView && suggestions.length > 0) {
+                if (componentState.isPopularView) {
+                    listHeader = 'Populära sökningar';
+                    showHistoryHeader = false; // Hide Rensa link
+                }
+                else {
+                    // Rule: Historik should show "Din privata historik - Rensa".
+                    // We let CoreSelector's default HistoryHeader handle this
+                    showHistoryHeader = true;
+                    listHeader = undefined;
+                }
+            }
+            else {
+                // Reset when searching or when no suggestions
+                listHeader = undefined;
+                showHistoryHeader = false;
+            }
+        }
+        else {
+            // Not in a state that should show a list header
+            listHeader = undefined;
+            showHistoryHeader = false;
+        }
+        return {
+            status: coreStatus,
+            inputValue,
+            suggestions,
+            selectedItem,
+            selectedItems,
+            validation,
+            validationContext,
+            message,
+            listHeader,
+            showHistoryHeader,
+            isHistoryView
+        };
+    }
+    render() {
+        const selectorState = this._mapStateToSelectorState(this.state);
+        // Explicitly construct config to match SelectorConfig interface
+        const config = {
+            disabled: this.disabled,
+            placeholder: this.placeholder,
+            minLength: this.minLength,
+            maxResults: this.maxResults,
+            enableMultiple: this.enableMultiple,
+            showSearchIcon: this.showSearchIcon,
+            requireSelection: this.requireSelection,
+            size: this.size,
+            enableSelectionAnimation: this.enableSelectionAnimation,
+            populateInputOnSelect: this.populateInputOnSelect,
+            maxVisibleRows: this.maxVisibleRows,
+            manualInputBehavior: 'select',
+            showHistoryHeader: this.history && !selectorState.listHeader, // Only show default if not override
+            listHeader: selectorState.listHeader,
+            enableInfiniteScroll: true
+        };
+        // Pass external error message if present and we are not in loading/error state
+        // (This logic is now moved to _mapStateToSelectorState to respect validation state)
+        return (h("div", { key: '11b208182109be21dcf759010cb87f1bbd10b618', class: "job-selector-wrapper" }, this.state.status === 'error' ? (h("div", { class: "error-message" }, h(AfValidationMessage, { variant: "error", role: "alert" }, this.state.message || 'Ett fel uppstod.'))) : (h(Fragment, null, h("core-selector", { id: this.componentId, componentId: this.componentId, state: selectorState, config: config, label: this.label, labelDescription: this.labelDescription, size: this.size, afFocused: this.afFocused })))));
+    }
+    static get is() { return "digi-service-job-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["job-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["job-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML-formul\u00E4rets f\u00E4ltnamn. F\u00F6ljer standardattributet `name`, p\u00E5 samma s\u00E4tt som\n`<input name=\"...\">`, och anv\u00E4nds som nyckel n\u00E4r v\u00E4rdet l\u00E4ses via `FormData`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "'yrkesvaljaren'"
+            },
+            "taxonomyUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fullst\u00E4ndig, explicit URL till en egenhostad datafil.\nUtel\u00E4mna attributet f\u00F6r att anv\u00E4nda senaste data automatiskt."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-taxonomy-url"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-placeholder",
+                "defaultValue": "\"T.ex. fris\u00F6r, v\u00E5rdbitr\u00E4de, snickare\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-label",
+                "defaultValue": "'V\u00E4lj yrke'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Om satt till true kan v\u00E4ljaren inte anv\u00E4ndas med mus eller tangentbord."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "enableMultiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-enable-multiple",
+                "defaultValue": "false"
+            },
+            "showSearchIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-show-search-icon",
+                "defaultValue": "true"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-error-message"
+            },
+            "labelDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-label-description"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Om satt till `true` m\u00E5ste f\u00E4ltet ha ett v\u00E4rde f\u00F6r att vara giltigt."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-required",
+                "defaultValue": "false"
+            },
+            "manualInput": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Om satt till `true` till\u00E5ts fritext som inte finns i taxonomin."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-manual-input",
+                "defaultValue": "false"
+            },
+            "history": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aktiverar historiken.\nAnv\u00E4nder Local Storage f\u00F6r att spara valda yrken i webbl\u00E4saren.\nIntegritet: Data lagras bara lokalt i webbl\u00E4saren.\nR\u00E4ckvidd: Historiken delas mellan sidor p\u00E5 samma dom\u00E4n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-history",
+                "defaultValue": "true"
+            },
+            "popular": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Om satt till true visas popul\u00E4ra yrken initialt n\u00E4r historiken \u00E4r tom."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-popular",
+                "defaultValue": "true"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Storleken p\u00E5 inputf\u00E4ltet.\n'small' | 'medium' | 'large'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "af-size",
+                "defaultValue": "'medium'"
+            },
+            "taxonomyData": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "TaxonomyItem[]",
+                    "resolved": "TaxonomyItem[]",
+                    "references": {
+                        "TaxonomyItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/job-selector/types.ts::TaxonomyItem",
+                            "referenceLocation": "TaxonomyItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Yrkesdata (taxonomi). Kan injiceras av integrat\u00F6ren f\u00F6r deterministisk laddning (t.ex. i testmilj\u00F6er). \nOm den l\u00E4mnas tom populeras den internt via det globala registret eller auto-fetch f\u00F6r att exponera aktuell data."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "afFocused": {},
+            "state": {},
+            "activeErrorType": {},
+            "animatingItemId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "afJobSelectedEmitter",
+                "name": "afJobSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "JobSelectionItem[]",
+                    "resolved": "JobSelectionItem[]",
+                    "references": {
+                        "JobSelectionItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/job-selector/types.ts::JobSelectionItem",
+                            "referenceLocation": "JobSelectionItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "dataLoadFailedEmitter",
+                "name": "afJobDataLoadFailed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ error: Error }",
+                    "resolved": "{ error: Error; }",
+                    "references": {
+                        "Error": {
+                            "location": "global",
+                            "id": "global::Error"
+                        }
+                    }
+                }
+            }, {
+                "method": "validationChangeEmitter",
+                "name": "afJobValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    isValid: boolean;\n    errorType: 'required' | 'invalidInput' | null;\n  }",
+                    "resolved": "{ isValid: boolean; errorType: \"required\" | \"invalidInput\" | null; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "updateData": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Uppdaterar taxonomidatan genom att l\u00E4sa om fr\u00E5n registret.\nAnv\u00E4nds efter att registerTaxonomy() har anropats med ny data.",
+                    "tags": []
+                }
+            },
+            "setSelection": {
+                "complexType": {
+                    "signature": "(input: JobSelectionInput) => Promise<JobSelectionItem[]>",
+                    "parameters": [{
+                            "name": "input",
+                            "type": "string | string[] | JobSelectionItem[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "JobSelectionItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/job-selector/types.ts::JobSelectionItem",
+                            "referenceLocation": "JobSelectionItem"
+                        },
+                        "JobSelectionInput": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/job-selector/types.ts::JobSelectionInput",
+                            "referenceLocation": "JobSelectionInput"
+                        }
+                    },
+                    "return": "Promise<JobSelectionItem[]>"
+                },
+                "docs": {
+                    "text": "S\u00E4tter ett programatiskt val och returnerar YV:s normaliserade, rika selection.\nStr\u00E4ngar som matchar Concept ID-formatet tolkas som taxonomi-id:n; \u00F6vriga som fritext.",
+                    "tags": []
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLCoreSelectorElement": {
+                            "location": "global",
+                            "id": "global::HTMLCoreSelectorElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "(forceTouch?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "forceTouch",
+                            "type": "boolean",
+                            "docs": "- Om true, tvingas valideringsfel att visas \u00E4ven om anv\u00E4ndaren inte interagerat med f\u00E4ltet."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validerar komponenten manuellt.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "forceTouch - Om true, tvingas valideringsfel att visas \u00E4ven om anv\u00E4ndaren inte interagerat med f\u00E4ltet."
+                        }]
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getValidity": {
+                "complexType": {
+                    "signature": "() => Promise<ValidityState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    },
+                    "return": "Promise<ValidityState>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "required",
+                "methodName": "watchRequired"
+            }, {
+                "propName": "manualInput",
+                "methodName": "watchManualInput"
+            }, {
+                "propName": "history",
+                "methodName": "watchHistory"
+            }, {
+                "propName": "popular",
+                "methodName": "watchPopular"
+            }, {
+                "propName": "enableMultiple",
+                "methodName": "watchEnableMultiple"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "taxonomyData",
+                "methodName": "watchTaxonomyData"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "afJobValidationChange",
+                "method": "handleFormValidationSync",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "hashchange",
+                "method": "handleHashFocus",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csInput",
+                "method": "handleInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csSelect",
+                "method": "handleCsSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csClear",
+                "method": "handleCsClear",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csClearHistory",
+                "method": "handleCsClearHistory",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csRequestHistory",
+                "method": "handleCsRequestHistory",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csLoadMore",
+                "method": "handleCsLoadMore",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csRemoveItem",
+                "method": "handleCsRemoveItem",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csFocus",
+                "method": "handleCsFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csBlur",
+                "method": "handleCsBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csEditSelection",
+                "method": "handleCsEditSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}