@arbetsformedlingen/yrkesvaljaren 2.0.5

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

@@ -0,0 +1,318 @@
+/*
+ * Minimal AF design compatibility tokens and primitives.
+ * Values are adapted from the AF design system v37.0.2 (Apache-2.0) so the
+ * selectors can render without loading the full design system runtime.
+ */
+
+: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;
+}
+
+
+/* src/components/yrkesvaljaren/yrkesvaljaren.css */
+
+:host {
+  /* === BAKÅTKOMPATIBILITET FÖR DIMENSIONER === */
+  --yrkesvaljaren-width: var(--af-width, 100%);
+  --yrkesvaljaren-min-width: var(--af-min-width, 200px);
+  --yrkesvaljaren-max-width: var(--af-max-width, none);
+  --yrkesvaljaren-height: var(--af-height, auto);
+  --yrkesvaljaren-min-height: var(--af-min-height, auto);
+  --yrkesvaljaren-max-height: var(--af-max-height, none);
+
+  /* === MAPPNING TILL CORE-SELECTOR (Adapter Layer) === */
+  --selector-width: var(--yrkesvaljaren-width);
+  --selector-min-width: var(--yrkesvaljaren-min-width);
+  --selector-max-width: var(--yrkesvaljaren-max-width);
+  --selector-height: var(--yrkesvaljaren-height);
+  --selector-min-height: var(--yrkesvaljaren-min-height);
+  --selector-max-height: var(--yrkesvaljaren-max-height);
+
+  /* Fonts & Colors Mapping */
+  --selector-font-family: var(--global-font-family, 'Open Sans', sans-serif);
+  --selector-font-size: var(--sok-font-size, 1rem);
+  --selector-text-color: var(--sok-text-color, #212529);
+  --selector-placeholder-color: var(--sok-placeholder-color, #6c757d);
+  --selector-border-color: var(--sok-border-color, #d1d5db);
+  --selector-focus-border-color: var(--sok-focus-border-color, #86b7fe);
+  --selector-focus-shadow: var(--sok-focus-shadow, 0 0 0 0.25rem rgba(13, 110, 253, 0.25));
+  --selector-background-color: var(--sok-background-color, #fff);
+  --selector-icon-color: var(--sok-icon-color, #6c757d);
+  --selector-clear-button-color: var(--sok-clear-button-color, #6c757d);
+  --selector-clear-button-hover-color: var(--sok-clear-button-hover-color, #212529);
+
+  --selector-suggestion-background-color: var(--sok-suggestion-background-color, #fff);
+  --selector-suggestion-border-color: var(--sok-suggestion-border-color, #ced4da);
+  --selector-suggestion-hover-background: var(--sok-suggestion-hover-background, #e9ecef);
+  --selector-suggestion-active-background: var(--sok-suggestion-active-background, #dde4eb);
+  --selector-suggestion-text-color: var(--sok-suggestion-text-color, #212529);
+  --selector-suggestion-highlight-weight: var(--sok-suggestion-highlight-weight, bold);
+
+  --selector-error-color: var(--sok-error-color, #dc3545);
+  --selector-loading-color: var(--sok-loading-color, #6c757d);
+
+  display: flex;
+  flex-direction: column;
+  width: var(--yrkesvaljaren-width);
+  min-width: var(--yrkesvaljaren-min-width);
+  max-width: var(--yrkesvaljaren-max-width);
+  height: var(--yrkesvaljaren-height);
+  min-height: var(--yrkesvaljaren-min-height);
+  max-height: var(--yrkesvaljaren-max-height);
+  position: relative;
+}
+
+/* --- Map Sizes --- */
+:host([af-size="small"]) {
+  --cs-size: small;
+  /* Hint to CoreSelector if it inherited prop, but it uses own host selector */
+  /* CoreSelector uses attributes, so we can't easily force its attribute from here via CSS */
+  /* But we can map the CSS vars it uses! */
+  --selector-container-min-height: 32px;
+  --selector-padding-y: 2px;
+  --selector-icon-size: 1em;
+  --selector-gap: 4px;
+}
+
+:host([af-size="medium"]) {
+  --selector-container-min-height: 40px;
+  --selector-padding-y: 6px;
+}
+
+:host([af-size="large"]) {
+  --selector-container-min-height: 48px;
+  --selector-padding-y: 10px;
+  --selector-icon-size: 1.25em;
+  --selector-gap: 8px;
+}
+
+
+* {
+  box-sizing: border-box;
+}
+
+.yrkesvaljaren-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: inherit;
+}
+
+
+
+
+core-selector {
+  margin-top: 0.5rem;
+}
+
+.status-message {
+  margin-top: 0.5rem;
+  font-size: 0.9em;
+  font-style: italic;
+  color: var(--sok-loading-color, #6c757d);
+}
+
+/* --- History Header Fix --- */
+.history-header {
+  /* Matches core-selector suggestion-item padding */
+  font-size: 0.875rem;
+  color: var(--digi--grayscale-700, #757575);
+  /* Optional: differentiate header slightly */
+  border-bottom: 1px solid var(--selector-suggestion-border-color, #ced4da);
+  margin-bottom: 0px;
+}
+
+.history-header a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.history-header a:hover {
+  color: var(--digi--global--color--cta--link--base, #1616B2);
+}