@arbetsformedlingen/yrkesvaljaren 2.0.11 → 2.0.12

package/README.md

@@ -9,57 +9,45 @@ En robust och intelligent sökkomponent för svenska yrken, designad för hög p
 
 *   **Enkelt hitta rätt yrke för användaren** <br>Sökalgoritmen prioriterar exakta träffar, prefix, flerdelade direktträffar och innehåller-träffar. Om inga direktträffar finns kan upp till tre fuzzy-träffar visas. Viktdata används som sekundär sortering.
 *   **Hög prestanda:** <br>Sökningen sker lokalt i webbläsaren mot inläst yrkesdata. Komponenten gör inga sökanrop till Taxonomy API.
-*   **Flexibel datahantering:** <br>Välj mellan automatiskt uppdaterad data, ett versionerat npm-datapaket eller en egen URL.
+*   **Flexibel datahantering:** <br>Versionerat npm-datapaket (rekommenderas), automatiskt uppdaterad data eller en egen URL.
 
 ---
 
 ### Installation
 
-Yrkesväljaren installeras enkelt via npm:
+Installera komponenten och datapaketet:
 
 ```bash
-npm install @arbetsformedlingen/yrkesvaljaren
+npm install @arbetsformedlingen/yrkesvaljaren @arbetsformedlingen/yrkesvaljaren-data@31
 ```
 
-När ingen datakälla anges hämtar komponenten automatiskt den senaste publicerade yrkesdatan från CDN.
+Datapaketets majorversion är taxonomiversionen: `31.x.y` innehåller taxonomi v31. Med `^31.0.0` i `package.json` får du rättningar av v31-datan men byter aldrig taxonomiversion av misstag. Installera nästa majorversion när du vill byta taxonomiversion.
 
-#### Alternativ: installera ett versionerat datapaket
+Datan registreras med `registerTaxonomy(...)` innan komponenten används. Se [Angular](#användning-i-angular) eller [HTML och andra ramverk](#användning-i-html-och-andra-ramverk).
 
-Om du vill låsa taxonomiversionen vid build time installerar du även ett versionerat datapaket:
-
-```bash
-npm install @arbetsformedlingen/yrkesvaljaren @taxonomy/yrkesvaljaren-data-v31
-```
-
-Registrera paketets data i din applikation innan komponenten används:
-
-```javascript
-import { registerTaxonomy } from '@arbetsformedlingen/yrkesvaljaren';
-import {
-  taxonomyData,
-  metadata
-} from '@taxonomy/yrkesvaljaren-data-v31';
-
-registerTaxonomy({ data: taxonomyData, metadata });
-```
-
-`af-taxonomy-url` är ett tredje, avancerat alternativ om du vill peka komponenten mot en egenhostad datafil.
+Utan registrerad data hämtar komponenten den senaste publicerade yrkesdatan från CDN. `af-taxonomy-url` är ett avancerat alternativ om du vill peka komponenten mot en egenhostad datafil.
 
 ### Användning i Angular
 
 De flesta som använder Yrkesväljaren bygger i Angular. Komponenten är en vanlig webbkomponent, så den fungerar i standalone-komponenter med eller utan zone.js.
 
-Registrera webbkomponenterna i `main.ts` innan appen startar:
+Registrera datan och webbkomponenterna i `main.ts` innan appen startar. Taxonomidatan är cirka 2 MB. Importera den dynamiskt, så hamnar den i en egen chunk. Med en statisk import hamnar den i main-bundlen och `ng build` fastnar på Angulars standardbudget (1 MB).
 
 ```ts
 // src/main.ts
 import { bootstrapApplication } from '@angular/platform-browser';
 import { defineCustomElements as defineYv } from '@arbetsformedlingen/yrkesvaljaren/loader';
+import { registerTaxonomy } from '@arbetsformedlingen/yrkesvaljaren';
 import { appConfig } from './app/app.config';
 import { App } from './app/app';
 
-defineYv(window);
-bootstrapApplication(App, appConfig).catch((err) => console.error(err));
+async function main() {
+  const { metadata, taxonomyData } = await import('@arbetsformedlingen/yrkesvaljaren-data');
+  registerTaxonomy({ data: taxonomyData, metadata });
+  defineYv(window);
+  await bootstrapApplication(App, appConfig);
+}
+main().catch((err) => console.error(err));
 ```
 
 Använd sedan komponenten i en standalone-komponent med `CUSTOM_ELEMENTS_SCHEMA` och lyssna på eventet i templaten:
@@ -89,29 +77,10 @@ export class JobPickerComponent {
 
 Uppdatera vyn via signals (eller `ChangeDetectorRef`) när ni sätter värden efter en `await`. Annars uppdateras inte vyn i zoneless-appar.
 
-**Låst dataversion i Angular:** taxonomidatan i `@taxonomy/yrkesvaljaren-data-v31` är cirka 2 MB. Importera den dynamiskt i `main.ts`, så hamnar den i en egen chunk. Med en statisk import hamnar den i main-bundlen och `ng build` fastnar på Angulars standardbudget (1 MB).
-
-```ts
-// src/main.ts
-import { bootstrapApplication } from '@angular/platform-browser';
-import { defineCustomElements as defineYv } from '@arbetsformedlingen/yrkesvaljaren/loader';
-import { registerTaxonomy } from '@arbetsformedlingen/yrkesvaljaren';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
-
-async function main() {
-  const { metadata, taxonomyData } = await import('@taxonomy/yrkesvaljaren-data-v31');
-  registerTaxonomy({ data: taxonomyData, metadata });
-  defineYv(window);
-  await bootstrapApplication(App, appConfig);
-}
-main().catch((err) => console.error(err));
-```
-
 Kompletta exempel:
 
-- [`examples/angular-wizard`](examples/angular-wizard): Yrkesväljaren i Reactive Forms via `ControlValueAccessor`.
-- [`examples/angular-multi-occupation-skills`](examples/angular-multi-occupation-skills): flera yrken med egna kompetensval via Kompetensväljarens headless-API.
+- [`examples/angular-wizard`](https://gitlab.com/arbetsformedlingen/taxonomy-dev/frontend/yrkesvaljaren/-/tree/main/examples/angular-wizard): Yrkesväljaren i Reactive Forms via `ControlValueAccessor`.
+- [`examples/angular-multi-occupation-skills`](https://gitlab.com/arbetsformedlingen/taxonomy-dev/frontend/yrkesvaljaren/-/tree/main/examples/angular-multi-occupation-skills): flera yrken med egna kompetensval via Kompetensväljarens headless-API.
 
 ### Användning i HTML och andra ramverk
 
@@ -146,6 +115,15 @@ console.log("Valt yrke:", e.detail);
 </html>
 ```
 
+**Utan Angular:** registrera datapaketets data innan komponenten används:
+
+```javascript
+import { registerTaxonomy } from '@arbetsformedlingen/yrkesvaljaren';
+import { taxonomyData, metadata } from '@arbetsformedlingen/yrkesvaljaren-data';
+
+registerTaxonomy({ data: taxonomyData, metadata });
+```
+
 **React:** koppla komponentens event med `addEventListener` via en `ref` i en `useEffect`. Det fungerar i alla React-versioner; en `onAfJobSelected`-prop fungerar inte i React 18.
 
 ### Vite
@@ -179,9 +157,9 @@ Yrkesväljaren är uppbyggd med designsystemets tokens, typografi, färger, foku
 | `af-enable-multiple` | Om satt till `true`, tillåts val av flera yrken. | `boolean` | `false` |
 | `af-history` | Sparar användarval lokalt i webbläsarens Local Storage och visar historiken på samma domän. | `boolean` | `true` |
 | `af-required` | Om satt till `true`, måste användaren göra ett val för att fältet ska vara giltigt (obligatoriskt fält). | `boolean` | `false` |
-| `af-manual-input` | Om satt till `true`, tillåts användaren att ange ett yrke fritt via fritext som inte finns i listan. Om satt till `false` måste ett fördefinierat yrke väljas. | `boolean` | `false` |
+| `af-manual-input` | Om satt till `true` kan användaren ange ett yrke som fritext när det inte finns i listan. Om satt till `false` måste ett fördefinierat yrke väljas. | `boolean` | `false` |
 | `af-size` | Storleken på inputfältet. Möjliga värden: `'small'`, `'medium'`, `'large'`. | `string` | `'medium'` |
-| `af-popular` | Om satt till `true`, visas sektionen "Populära sökningar" när historiken är tom. | `boolean` | `true` |
+| `af-popular` | Om satt till `true` visas sektionen "Populära sökningar" när historiken är tom. | `boolean` | `true` |
 | `af-taxonomy-url` | Fullständig, explicit URL till en egenhostad datafil. Utelämna attributet för att använda senaste data automatiskt. | `string` | `undefined` |
 
 ### Riktlinjer och rekommendationer
@@ -190,7 +168,7 @@ Tre centrala inställningar styr användarupplevelsen och datakvaliteten i Yrkes
 
 #### Obligatorisk (`af-required`)
 * **Hur man kan resonera:** När `af-required="true"` måste användaren välja minst ett yrke för att fältet ska betraktas som giltigt. Komponenten fungerar som ett standardenligt *Form-Associated Custom Element* (FACE). Det innebär att webbläsaren automatiskt validerar fältet vid formulärinskick, förhindrar att formuläret skickas in om det är tomt, och integrerar med formulärets `validity`-status.
-* **När det rekommenderas:** I formulär och flöden där ett yrkesval är ett obligatoriskt steg i ett ärende (t.ex. inskriving, aktivtitetsrapportering).
+* **När det rekommenderas:** I formulär och flöden där ett yrkesval är ett obligatoriskt steg i ett ärende (t.ex. inskrivning och aktivitetsrapportering).
 * **När det bör undvikas:** I öppna sök- eller filtreringsvyer där användaren ska kunna söka brett, filtrera på andra parametrar (t.ex. enbart ort/geografi) eller frivilligt specificera yrke.
 
 #### Tillåt fritext (`af-manual-input`)
@@ -200,9 +178,9 @@ Tre centrala inställningar styr användarupplevelsen och datakvaliteten i Yrkes
   * **Fritext tillåten (`af-manual-input="true"`):** I öppna fritextprofiler, fritextenkäter eller intresseanmälningar där det är viktigare att fånga upp vad användaren själv kallar sin roll än att få ett taxonomi-ID, eller där man inte vill blockera användare med ovanliga, nischade eller internationella titlar.
 
 #### Tillåt historik (`af-history`)
-* **Hur man kan resonera:** Sparar gjorda val i webbläsarens localStorage per domän och enhet, och visar dem som "Tidigare val" när användaren fokuserar Yrkesväljaren. Det betyder att historiken kommer att visas på alla tjänster med yrkesväljare på arbetsformedlingen.se (så länge personen använder samma enhet, t.ex sin mobil).
+* **Hur man kan resonera:** Sparar gjorda val i webbläsarens localStorage per domän och enhet, och visar dem som "Tidigare val" när användaren fokuserar Yrkesväljaren. Det betyder att historiken kommer att visas på alla tjänster med yrkesväljare på arbetsformedlingen.se (så länge personen använder samma enhet, t.ex. sin mobil).
 * **När det rekommenderas:** På alla tjänster mot konsumenter.
-* **När det bör undvikas:** På delade publika terminaler eller kioskdatorer (t.ex. på Arbetsförmedlingens servicekontor) där personers tidigare sökningar inte ska sparas eller exponeras för efterföljande besökare på samma dator. Kanske är det inget hjälpsamt stöd för tjänster för Handläggare eftersom de söker måååånga olika yrken.
+* **När det bör undvikas:** På delade publika terminaler eller kioskdatorer (t.ex. på Arbetsförmedlingens servicekontor) där personers tidigare sökningar inte ska sparas eller exponeras för efterföljande besökare på samma dator. I handläggartjänster är historiken sällan till hjälp, eftersom handläggare söker på många olika yrken.
 
 ### Välj datakälla
 
@@ -235,7 +213,7 @@ dataladdning.
 
 | Metod | Returvärde | Beskrivning |
 |:---|:---|:---|
-| `setSelection(input)` | `Promise<JobSelectionItem[]>` | Sätter eller rensar ett programmatiskt val. Returnerar komponentens normaliserade selection. |
+| `setSelection(input)` | `Promise<JobSelectionItem[]>` | Sätter eller rensar ett programmatiskt val. Returnerar komponentens normaliserade val. |
 | `setFocus()` | `Promise<void>` | Flyttar fokus till sökfältet. Används när värdappen till exempel öppnar en modal eller vill fokusera fältet efter ett fel. |
 
 #### Formulärvalidering
@@ -363,7 +341,7 @@ För att göra fältet obligatoriskt, använd `af-required`-attributet och stäl
 ></digi-service-job-selector>
 ```
 
-När detta är inställt kommer komponenten att visa ett felmeddelande om användaren klickar i och sedan lämnar fältet utan att göra ett giltigt val. Om `af-manual-input` istället är satt till `true` tillåts användaren att ange ett yrke manuellt via fritext.
+När detta är inställt kommer komponenten att visa ett felmeddelande om användaren klickar i och sedan lämnar fältet utan att göra ett giltigt val. Om `af-manual-input` i stället är satt till `true` tillåts användaren att ange ett yrke manuellt via fritext.
 <br>
 #### Lyssna på valideringsstatus (`afJobValidationChange`)
 

package/dist/cjs/core-selector.cjs.entry.js

@@ -23,6 +23,8 @@ const AfTag = ({ text, breakWords = false, onRemove }) => (index.h("span", { cla
         onRemove();
     } }, index.h("span", { class: { 'af-tag__text': true, 'af-tag__text--break': breakWords } }, text), index.h(AfIcon, { name: "x", class: "af-tag__remove-icon" }))));
 
+/** Max antal tecken i sökfältet och därmed i ett manuellt val. Längsta begrepp i taxonomin är 90 tecken. */
+const SELECTOR_INPUT_MAX_LENGTH = 120;
 function shouldShowManualInput(state, requireSelection = false) {
     if (!state || requireSelection)
         return false;
@@ -428,7 +430,7 @@ const CoreSelector = class {
             } }), index.h("div", { class: { 'input-area': true, 'has-value': !this.config.showSearchIcon || hasInput || hasTags } }, isSelected && (index.h("span", { class: "selected-text-in-box" }, displayValue)), !isSelected && !hasInput && this.config.placeholder && (index.h("span", { class: "selector-placeholder-overlay", "aria-hidden": "true" }, this.config.placeholder)), index.h("input", { class: {
                 'selector-input-field': true,
                 'visually-hidden-selected': isSelected
-            }, ref: (el) => this.inputRef = el, id: `${this.componentId}-input`, type: "text", value: displayValue, onInput: (e) => {
+            }, ref: (el) => this.inputRef = el, id: `${this.componentId}-input`, type: "text", value: displayValue, maxLength: SELECTOR_INPUT_MAX_LENGTH, onInput: (e) => {
                 if (this.config.disabled)
                     return;
                 this.isKeyboardNavigationActive = false;