@arbetsformedlingen/yrkesvaljaren 2.0.5

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/design-compat/af-icon.js

@@ -0,0 +1,13 @@
+import { h } from "@stencil/core";
+const svgMarkup = {
+    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>',
+};
+export const AfIcon = ({ name, class: className }) => (h("span", { class: className, "aria-hidden": "true", innerHTML: svgMarkup[name], style: {
+        display: 'flex',
+        width: className ? undefined : '12px',
+        height: className ? undefined : '12px',
+        minHeight: '1.4em',
+        alignItems: 'center',
+    } }));

package/dist/collection/components/design-compat/af-label.js

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const AfLabel = ({ label, forId, description, required = false }) => (h("div", { class: "af-form-label" }, h("label", { class: "af-form-label__label", htmlFor: forId }, label, required ? ' *' : ''), description && h("span", { class: "af-form-label__description" }, description)));

package/dist/collection/components/design-compat/af-tag.js

@@ -0,0 +1,6 @@
+import { h } from "@stencil/core";
+import { AfIcon } from "./af-icon";
+export const AfTag = ({ text, breakWords = false, onRemove }) => (h("span", { class: "af-tag" }, h("button", { type: "button", class: "af-tag__button", "aria-label": `Ta bort ${text}`, onClick: (event) => {
+        event.preventDefault();
+        onRemove();
+    } }, h("span", { class: { 'af-tag__text': true, 'af-tag__text--break': breakWords } }, text), h(AfIcon, { name: "x", class: "af-tag__remove-icon" }))));

package/dist/collection/components/design-compat/af-validation-message.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+export const AfValidationMessage = (props, children) => {
+    const extraClass = props.class || '';
+    return (h("div", { id: props.id, role: props.role, class: { [extraClass]: !!extraClass } }, h("div", { class: {
+            'af-validation-message': true,
+            [`af-validation-message--${props.variant}`]: true,
+        } }, h("span", { class: {
+            'af-validation-message__icon': true,
+            [`af-validation-message__icon--${props.variant}`]: true,
+        }, "aria-hidden": "true" }), h("span", { class: "af-validation-message__text" }, children))));
+};

package/dist/collection/components/design-compat/index.js

@@ -0,0 +1,4 @@
+export { AfIcon } from './af-icon';
+export { AfLabel } from './af-label';
+export { AfTag } from './af-tag';
+export { AfValidationMessage } from './af-validation-message';

package/dist/collection/components/geovaljaren/geovaljaren.css

@@ -0,0 +1,21 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.geo-valjaren-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.history-header {
+    user-select: none;
+}
+
+.history-header a {
+    cursor: pointer;
+}
+
+.history-header a:hover {
+    text-decoration: underline !important;
+}

package/dist/collection/components/geovaljaren/geovaljaren.js

@@ -0,0 +1,304 @@
+import { h } from "@stencil/core";
+import { GeoDataService } from "./logic/data.utils";
+import { SearchEngine } from "./logic/search.engine";
+import { GeoHistoryService } from "./logic/history-service";
+export class Geovaljaren {
+    label = 'Din kommun';
+    placeholder = 'Vilken kommun bor du i?';
+    selectorState = {
+        status: 'loading',
+        inputValue: '',
+        suggestions: [],
+        selectedItems: [],
+        validation: 'idle'
+    };
+    selectionEmitter;
+    config = {
+        placeholder: this.placeholder,
+        minLength: 1,
+        maxResults: 10,
+        enableMultiple: false,
+        showSearchIcon: true,
+        requireSelection: true,
+        size: 'medium',
+        enableToast: false,
+        showHistoryHeader: true
+    };
+    engine = null;
+    allGeoItems = [];
+    async componentWillLoad() {
+        this.selectorState = { ...this.selectorState, status: 'loading' };
+        try {
+            this.allGeoItems = await GeoDataService.fetchAll();
+            this.engine = new SearchEngine(this.allGeoItems);
+            this.selectorState = { ...this.selectorState, status: 'searching' };
+        }
+        catch (err) {
+            console.error('Failed to load geo data', err);
+            this.selectorState = { ...this.selectorState, status: 'error', message: 'Kunde inte ladda kommuner.' };
+        }
+    }
+    showHistory() {
+        if (!this.allGeoItems.length)
+            return;
+        // Don't show history if there's typed text
+        if (this.selectorState.inputValue.trim() !== '')
+            return;
+        const historyItems = GeoHistoryService.loadHistory();
+        // Lazy Validation: Only show items that still exist in our current dataset
+        const validatedHistory = historyItems.filter(hItem => this.allGeoItems.some(item => item.id === hItem.id));
+        this.selectorState = {
+            ...this.selectorState,
+            status: 'searching',
+            suggestions: validatedHistory,
+            inputValue: this.selectorState.inputValue
+        };
+    }
+    addToHistory(item) {
+        const currentHistory = GeoHistoryService.loadHistory();
+        const filtered = currentHistory.filter(h => h.id !== item.id);
+        const newHistory = [item, ...filtered].slice(0, 10);
+        GeoHistoryService.saveHistory(newHistory);
+    }
+    clearHistory() {
+        GeoHistoryService.clearHistory();
+        this.selectorState = {
+            ...this.selectorState,
+            suggestions: []
+        };
+    }
+    handleInput(event) {
+        const query = event.detail;
+        if (!this.engine)
+            return;
+        if (query.trim() === '') {
+            this.selectorState = { ...this.selectorState, inputValue: '' };
+            this.showHistory();
+            return;
+        }
+        const suggestions = query.length >= this.config.minLength ? this.engine.search(query) : [];
+        const wasInError = this.selectorState.validation === 'error' || this.selectorState.validationContext === 'from-error';
+        this.selectorState = {
+            ...this.selectorState,
+            inputValue: query,
+            suggestions,
+            status: 'searching',
+            validation: 'idle',
+            validationContext: wasInError ? 'from-error' : undefined
+        };
+    }
+    handleFocus() {
+        // Handled by csRequestHistory
+    }
+    handleRequestHistory() {
+        this.showHistory();
+    }
+    handleSelect(event) {
+        const selection = event.detail;
+        const wasInError = this.selectorState.validation === 'error' || this.selectorState.validationContext === 'from-error';
+        this.addToHistory(selection);
+        this.selectorState = {
+            ...this.selectorState,
+            status: 'itemSelected',
+            selectedItem: selection,
+            suggestions: [],
+            inputValue: selection.label, // Keep label as input value
+            validation: wasInError ? 'success' : 'idle',
+            message: wasInError ? 'Klart!' : '',
+            validationContext: wasInError ? 'from-error' : undefined
+        };
+        this.selectionEmitter.emit(selection);
+        if (wasInError) {
+            setTimeout(() => {
+                if (this.selectorState.status === 'itemSelected' && this.selectorState.validation === 'success') {
+                    this.selectorState = { ...this.selectorState, validation: 'idle' };
+                }
+            }, 3000);
+        }
+    }
+    handleBlur() {
+        if (this.selectorState.status === 'searching' && this.selectorState.inputValue.trim() !== '') {
+            const suggestions = this.selectorState.suggestions;
+            if (suggestions.length === 0) {
+                this.selectorState = {
+                    ...this.selectorState,
+                    validation: 'error',
+                    message: 'Du måste välja ett alternativ från listan.'
+                };
+            }
+        }
+    }
+    handleClear() {
+        // Only clear if explicitly triggered by the X button
+        this.selectorState = {
+            ...this.selectorState,
+            status: 'searching',
+            inputValue: '',
+            suggestions: [],
+            selectedItem: undefined,
+            validation: 'idle',
+            validationContext: undefined
+        };
+        this.showHistory();
+    }
+    handleCsClearHistory() {
+        this.clearHistory();
+    }
+    handleEdit() {
+        const wasInError = this.selectorState.validation === 'error' || this.selectorState.validationContext === 'from-error';
+        // When clicking to edit, keep the label of the item as search text
+        const currentLabel = this.selectorState.selectedItem?.label || '';
+        this.selectorState = {
+            ...this.selectorState,
+            status: 'searching',
+            inputValue: currentLabel,
+            suggestions: [],
+            validation: 'idle',
+            validationContext: wasInError ? 'from-error' : undefined
+        };
+        // Don't show history if we have text
+        if (currentLabel === '') {
+            this.showHistory();
+        }
+    }
+    render() {
+        return (h("div", { key: '5f7e4f0fb8fa815145ddd5690894ec7906dc2f1a', class: "geo-valjaren-wrapper" }, h("core-selector", { key: '73940c1ae5092f5f5f84bbd53edc6112e4374310', state: this.selectorState, config: { ...this.config, placeholder: this.placeholder }, label: this.label, labelDescription: "Ange den kommun du bor i f\u00F6r att se pendlingsalternativ" })));
+    }
+    static get is() { return "geo-valjaren"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["geovaljaren.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["geovaljaren.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": "'Din kommun'"
+            },
+            "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": "'Vilken kommun bor du i?'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectorState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectionEmitter",
+                "name": "afGeoSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "GenericItem | null",
+                    "resolved": "GenericItem<unknown> | null",
+                    "references": {
+                        "GenericItem": {
+                            "location": "import",
+                            "path": "../core-selector/types",
+                            "id": "src/components/core-selector/types.ts::GenericItem",
+                            "referenceLocation": "GenericItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "csInput",
+                "method": "handleInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csFocus",
+                "method": "handleFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csRequestHistory",
+                "method": "handleRequestHistory",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csSelect",
+                "method": "handleSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csBlur",
+                "method": "handleBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csClear",
+                "method": "handleClear",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csClearHistory",
+                "method": "handleCsClearHistory",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "csEditSelection",
+                "method": "handleEdit",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/geovaljaren/logic/adapter.utils.js

@@ -0,0 +1,20 @@
+export const GeoAdapter = {
+    /**
+     * Transforms the pendlingskommuner JSON data structure into GenericItems.
+     */
+    toGenericItems: (jsonData) => {
+        if (!jsonData || !jsonData.data) {
+            console.warn("Invalid JSON data structure for GeoAdapter");
+            return [];
+        }
+        // jsonData.data is an object where keys are IDs
+        return Object.entries(jsonData.data).map(([id, value]) => {
+            return {
+                id: id,
+                label: value.preferred_label || 'Okänd kommun',
+                description: `Kommun-ID: ${id}`, // We don't have much else to show right now
+                metadata: value // Keep original for destinations access later if needed
+            };
+        });
+    }
+};

package/dist/collection/components/geovaljaren/logic/data.utils.js

@@ -0,0 +1,12 @@
+import geoData from "../assets/pendlingskommuner.json";
+import { GeoAdapter } from "./adapter.utils";
+export const GeoDataService = {
+    /**
+     * Simulates an async fetch of geo data
+     */
+    fetchAll: async () => {
+        // Simulate network delay
+        await new Promise(resolve => setTimeout(resolve, 500));
+        return GeoAdapter.toGenericItems(geoData);
+    }
+};

package/dist/collection/components/geovaljaren/logic/history-service.js

@@ -0,0 +1,25 @@
+export const GeoHistoryService = {
+    saveHistory(history) {
+        try {
+            localStorage.setItem('geovaljaren_history', JSON.stringify(history));
+        }
+        catch (e) {
+            console.error('[GeoHistoryService] Kunde inte spara historik.', e);
+        }
+    },
+    loadHistory() {
+        try {
+            const historyString = localStorage.getItem('geovaljaren_history');
+            if (historyString) {
+                return JSON.parse(historyString);
+            }
+        }
+        catch (e) {
+            console.error('[GeoHistoryService] Kunde inte läsa historik.', e);
+        }
+        return [];
+    },
+    clearHistory() {
+        localStorage.removeItem('geovaljaren_history');
+    }
+};

package/dist/collection/components/geovaljaren/logic/search.engine.js

@@ -0,0 +1,28 @@
+import Fuse from "fuse.js";
+const FUSE_OPTIONS = {
+    includeScore: true,
+    threshold: 0.3,
+    keys: [
+        { name: 'label', weight: 2 },
+        { name: 'description', weight: 1 }
+    ],
+    shouldSort: true,
+    minMatchCharLength: 1,
+};
+export class SearchEngine {
+    fuse = null;
+    constructor(data) {
+        this.updateIndex(data);
+    }
+    search(query, maxResults = 10) {
+        if (!this.fuse || !query)
+            return [];
+        // Fuse search
+        const results = this.fuse.search(query);
+        // Map back to item
+        return results.map(r => r.item).slice(0, maxResults);
+    }
+    updateIndex(newData) {
+        this.fuse = new Fuse(newData, FUSE_OPTIONS);
+    }
+}

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

@@ -0,0 +1,26 @@
+// Minimum number of characters required to trigger search
+export const MIN_INPUT_LENGTH = 1;
+// Debounce time for search input (ms)
+export const DEBOUNCE_TIME = 100; // ms - Återställt till 250 baserat på sok-box.tsx initialt
+// Default maximum number of results to display
+export const MAX_RESULTS = 10;
+// Configuration for Fuse.js
+export const FUSE_OPTIONS = {
+    keys: ['preferred_label'], // Ändrat från 'label' till 'preferred_label' för att matcha datastrukturen
+    includeScore: true,
+    ignoreDiacritics: true, // Lägg till för att matcha t.ex. vard -> vård
+    ignoreFieldNorm: true, // Lägg till för att ignorera fältlängd vid poängsättning
+    threshold: 0.6, // Behåll 0.6
+    minMatchCharLength: MIN_INPUT_LENGTH, // Refererar till konstant ovan
+    ignoreLocation: true, // Match anywhere in the string
+    distance: 100, // Allow matches further apart
+};
+// UI Text Strings
+export const PLACEHOLDER_TEXT = "T.ex. frisör, vårdbiträde, snickare"; // Uppdaterad standardplaceholder enligt Figma-design
+export const NO_RESULTS_TEXT = "Inga resultat matchade din sökning.";
+export const VALIDATION_ERROR_REQUIRED_FIELD = "Du måste göra ett val";
+export const VALIDATION_ERROR_EMPTY_FIELD = "Välj ett yrke från listan";
+// Nya konstanter för aria-label
+export const CLEAR_BUTTON_LABEL_TEXT = "Rensa sökfält";
+export const REMOVE_ITEM_LABEL_TEXT_PREFIX = "Ta bort";
+export const POSITIVE_VALIDATION_TEXT = "Valt yrke";

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

@@ -0,0 +1,41 @@
+import log from "loglevel";
+let memoryCache = null;
+export const HistoryService = {
+    saveHistory(history) {
+        memoryCache = history; // Omedelbar uppdatering av UI-state
+        try {
+            localStorage.setItem('job-selector_history', JSON.stringify(history));
+            log.debug('[HistoryService] saveHistory - History saved.');
+        }
+        catch (e) {
+            log.error('Kunde inte spara historik.', e);
+        }
+    },
+    loadHistory() {
+        if (memoryCache) {
+            return memoryCache;
+        }
+        try {
+            const historyString = localStorage.getItem('job-selector_history');
+            if (historyString) {
+                memoryCache = JSON.parse(historyString);
+                return memoryCache;
+            }
+        }
+        catch (e) {
+            log.error('Kunde inte läsa historik.', e);
+        }
+        memoryCache = [];
+        return memoryCache;
+    },
+    clearHistory() {
+        memoryCache = [];
+        try {
+            localStorage.removeItem('job-selector_history');
+            log.debug('[HistoryService] clearHistory - History cleared.');
+        }
+        catch (e) {
+            log.error('Kunde inte rensa historik.', e);
+        }
+    }
+};