@designsystem-se/af 39.1.0 → 39.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designsystem-se/af",
   "author": "Arbetsförmedlingen",
-  "version": "39.1.0",
+  "version": "39.2.0",
   "description": "Web Components for Digi Designsystem",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",

package/dist/digi-arbetsformedlingen/p-b91c9055.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,h as a,g as n}from"./p-52e3bb32.js";import{L as e}from"./p-a39f86c9.js";import{l as s}from"./p-e3d2e899.js";import{r as d}from"./p-ffe5c0e8.js";import{a as o,F as r,b as g}from"./p-6e383896.js";const c=class{constructor(a){i(this,a),this.afOnClickFeedback=t(this,"afOnClickFeedback",7),this.afOnSubmitFeedbackLink=t(this,"afOnSubmitFeedbackLink",7),this.afId=d("digi-tools-feedback-rating"),this.afIsDone=void 0,this.afVariation=void 0,this.afType=o.FULLWIDTH,this.afHeadingLevel=r.H2,this.afQuestion="Hur nöjd är du med tjänsten?",this.afThankYouHeading="Tack för din feedback!",this.afRatings="Inte alls nöjd;Inte särskilt nöjd;Ganska nöjd;Nöjd;Mycket nöjd",this.afDir=void 0,this.afLang=void 0,this.afLink=void 0,this.afLinkText=void 0,this.afProduct=void 0,this.afApplication=void 0,this.afProductArea=void 0,this.afName=void 0,this.afQuestionType=void 0,this.afUseCustomLink=!1,this.currentStep=1,this.validContent=!0,this.hoveredRating=void 0,this.selectedRating=void 0,this.selectedText=void 0}afIsDoneHandler(){this.currentStep=2}validateQuestion(){if(""==this.afQuestion)return s.warn("digi-tools-feedback-rating must have a question - please add af-question to the component",this.hostElement),this.validContent=!1,!1}componentWillLoad(){this.validateQuestion()}componentDidRender(){this._thankYouHeading&&this._thankYouHeading.focus()}getCurrentPageUrl(){return window.location.href}renderLink(){return this.afUseCustomLink?`${this.afLink}?q1o${this.selectedRating}=1&q2o1=${this.getCurrentPageUrl()}`:this.afLink}async afMSetStep(i){this.currentStep=i}async afMReset(){this.afMSetStep(1),this.selectedRating=null}submitFeedback(){this.afOnClickFeedback.emit(this.getFeedbackData())}submitFeedbackLink(){this.afOnSubmitFeedbackLink.emit(this.getFeedbackLinkData())}ratingsData(){let i=[];this.afRatings&&(i=this.afRatings.split(";"));const t=[];for(let a=0;a<5;a++)t.push({value:a+1,text:i[a]||""});return t}handleRatingChange(i){this.selectedRating=i,this.selectedText=(this.ratingsData().find((i=>i.value===this.selectedRating))||{}).text||null,this.submitFeedback(),this.currentStep=2}handleHover(i){this.hoveredRating=i}getFeedbackData(){return{productarea:this.afProductArea,product:this.afProduct,application:this.afApplication,id:this.afId,name:this.afName,questionType:this.afQuestionType,question:this.afQuestion,rating:this.selectedRating,ratingDescription:this.selectedText,variation:this.afVariation,version:"2"}}getFeedbackLinkData(){return{productarea:this.afProductArea,product:this.afProduct,application:this.afApplication,id:this.afId,name:this.afName,questionType:this.afQuestionType,question:this.afQuestion,linkText:this.afLinkText,linkHref:this.afLink,version:"2"}}get cssModifiers(){return{"digi-tools-feedback-rating--fullwidth":this.afType===o.FULLWIDTH,"digi-tools-feedback-rating--grid":this.afType===o.GRID,"digi-tools-feedback-rating--minimal":this.afType===o.MINIMAL}}get layoutBlockVariation(){if(this.afType===o.MINIMAL)return e.TRANSPARENT;switch(this.afVariation){case g.PRIMARY:return e.SYMBOL;case g.SECONDARY:return e.PRIMARY;case g.TERTIARY:return e.SECONDARY}}get content(){return a("digi-typography",null,this.validContent&&a("div",{dir:this.afDir,lang:this.afLang,class:"digi-tools-feedback-rating__wrapper "+(2===this.currentStep?"step2":"")},1===this.currentStep&&a("div",{class:"digi-tools-feedback-rating__star-rating"},a(this.afHeadingLevel,{id:`${this.afId}-rating-question`,class:"digi-tools-feedback-rating__heading "+(this.afType===o.MINIMAL?"hidden":"")},this.afQuestion),a("div",{class:"digi-tools-feedback-rating__step1-wrapper"},this.afRatings&&a("span",{class:"digi-tools-feedback-rating__step1-description"},"Välj från"," ",`${(this.ratingsData().find((i=>1===i.value))||{}).text.toLowerCase()||null} till ${(this.ratingsData().find((i=>5===i.value))||{}).text.toLowerCase()||null}`),a("div",{"aria-labelledby":`${this.afId}-rating-question`,class:"digi-tools-feedback-rating__star-rating-stars",role:"group"},this.ratingsData().map((({text:i,value:t})=>a("div",{class:"digi-tools-feedback-rating__star-rating-star"},a("button",{class:"digi-tools-feedback-rating__star-rating-star-button",onClick:()=>this.handleRatingChange(t),"aria-label":`${t} ${1===t?"stjärna":"stjärnor"}${""!==i?", "+i:""}`,onMouseEnter:()=>this.handleHover(t),onMouseLeave:()=>this.handleHover(0),onFocus:()=>this.handleHover(t),onFocusout:()=>this.handleHover(0)},a("svg",{"aria-hidden":"true",width:"29px",height:"29px",viewBox:"0 0 32 32",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"digi-tools-feedback-rating-star-icon "+(this.hoveredRating>=t?"filled":"")},a("g",{stroke:"none","stroke-width":"1","stroke-linecap":"round","stroke-linejoin":"round"},a("g",{transform:"translate(-1852, -2564)","stroke-width":"2",class:"digi-tools-feedback-rating-star-icon-border"},a("g",{transform:"translate(1663, 2565)"},a("g",{transform:"translate(190, 0)"},a("path",{d:"M13.0369701,1.00988613 L9.47212213,8.51643297 L1.4958694,9.72422429 C0.0655277509,9.93973122 -0.507709524,11.7709448 0.529620648,12.8199039 L6.30005635,18.6595463 L4.93529305,26.9090563 C4.6897182,28.3999832 6.20191813,29.5170473 7.46854321,28.8195669 L14.6037422,24.9244875 L21.7391705,28.8195669 C23.0057956,29.5113322 24.5179955,28.3999832 24.2721914,26.9090563 L22.9074281,18.6595463 L28.6780931,12.8199039 C29.715194,11.7709448 29.1419567,9.93973122 27.711615,9.72422429 L19.7355916,8.51643297 L16.1707436,1.00988613 C15.531928,-0.328161856 13.6810595,-0.345069029 13.0369701,1.00988613 L13.0369701,1.00988613 Z"}))))))))))))),2===this.currentStep&&a("div",{class:"digi-tools-feedback-rating__thankyou"},a("div",{class:"digi-tools-feedback-rating__thankyou-text"},a("svg",{width:"32",height:"26",xmlns:"http://www.w3.org/2000/svg",class:"digi-tools-feedback-rating__thankyou-check-icon"},a("g",{fill:"none","fill-rule":"evenodd"},a("path",{d:"M12.431 25.438C5.577 25.438 0 19.848 0 12.978 0 6.107 5.577.518 12.43.518c2.874 0 5.677 1.006 7.893 2.833l-1.441 1.755a10.163 10.163 0 0 0-6.452-2.315c-5.604 0-10.163 4.57-10.163 10.187 0 5.616 4.56 10.186 10.163 10.186 4.346 0 8.21-2.766 9.617-6.883l2.146.737a12.435 12.435 0 0 1-11.763 8.42",fill:"#333"}),a("path",{d:"M13.073 20.935a.725.725 0 0 1-1.022 0l-8.042-8.013a.72.72 0 0 1 0-1.019l1.704-1.699a.725.725 0 0 1 1.023 0l5.826 5.805L28.417.211a.724.724 0 0 1 1.023 0l1.704 1.699a.72.72 0 0 1 0 1.02l-18.07 18.005Z",fill:"none",class:"digi-tools-feedback-rating__infographic-primary"}))),a("h2",{class:"digi-tools-feedback-rating__thankyou-text",tabindex:"-1",ref:i=>this._thankYouHeading=i},this.afThankYouHeading)),this.afRatings&&a("p",{class:"digi-tools-feedback-rating__thankyou-text-with-rating"},'Du har gett betyget "',this.selectedText.toLowerCase(),'" med'," ",this.selectedRating,1===this.selectedRating?" stjärna":" stjärnor",".")),2===this.currentStep&&this.afLinkText&&a("div",{class:"digi-tools-feedback-rating__link"},a("digi-link-external",{afHref:this.renderLink(),"af-target":"_blank",onAfOnClick:()=>this.submitFeedbackLink(),"af-variation":"small"},this.afLinkText))))}render(){return a("div",{key:"92be9e5f875efdfaae5655bf648b4aef277ed240",class:Object.assign({"digi-tools-feedback-rating":!0},this.cssModifiers)},a("digi-layout-block",{key:"b4dddd1ef54e948b267ba979bc2e8f02a031caa0",afVariation:this.layoutBlockVariation,afMarginTop:!0,"af-container":"none"},this.content))}get hostElement(){return n(this)}static get watchers(){return{afIsDone:["afIsDoneHandler"],afQuestion:["validateQuestion"]}}};c.style=".sc-digi-tools-feedback-rating-h {\n  container-type: inline-size;\n  display: block;\n  width: 100%;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating--fullwidth.sc-digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n  padding-left: 0;\n  padding-right: 0;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating--minimal.sc-digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n  padding: 0;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n  padding-top: var(--digi--padding--largest);\n  padding-inline: var(--digi--padding--largest);\n  padding-bottom: 40px;\n}\n@media (max-width: 47.9375rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n    padding-bottom: 24px;\n    padding-top: var(--digi--padding--medium);\n  }\n}\n@media (max-width: 36rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__wrapper.sc-digi-tools-feedback-rating {\n    padding-inline: var(--digi--padding--medium);\n  }\n}\n@container (max-width: 576px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper {\n    padding-inline: var(--digi--padding--medium);\n  }\n}\n@container (max-width: 768px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__wrapper {\n    padding-bottom: 24px;\n    padding-top: var(--digi--padding--medium);\n  }\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-wrapper.sc-digi-tools-feedback-rating {\n  display: block;\n}\n@media (min-width: 36rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-wrapper.sc-digi-tools-feedback-rating {\n    margin-top: 0;\n  }\n}\n@media (max-width: 48rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-wrapper.sc-digi-tools-feedback-rating {\n    flex-shrink: unset;\n  }\n}\n@container (min-width: 576px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__step1-wrapper {\n    margin-top: 0;\n  }\n}\n@container (max-width: 768px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__step1-wrapper {\n    flex-shrink: unset;\n  }\n}\n@container (max-width: 342px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating .digi-tools-feedback-rating__step1-wrapper {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    row-gap: var(--digi--padding--medium);\n  }\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__step1-description.sc-digi-tools-feedback-rating {\n  display: block;\n  margin-bottom: 10px;\n  font-weight: var(--digi--typography--label--font-weight--mobile);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__heading.sc-digi-tools-feedback-rating {\n  margin-top: 0;\n  margin-inline-end: 3.5rem;\n  max-width: 500px;\n  margin-bottom: 16px;\n}\n@media (max-width: 48rem) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__heading.sc-digi-tools-feedback-rating {\n    margin-inline-end: 0;\n  }\n}\n@container (max-width: 768px) {\n  .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating legend .digi-tools-feedback-rating__heading {\n    margin-inline-end: 0;\n  }\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__fieldset.sc-digi-tools-feedback-rating {\n  max-width: inherit;\n  border: none !important;\n  margin: 0;\n  padding: 0;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating.sc-digi-tools-feedback-rating {\n  padding: 0;\n  width: 100%;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating.sc-digi-tools-feedback-rating legend.sc-digi-tools-feedback-rating {\n  padding-left: 0;\n  flex-basis: 26.8125rem;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating.sc-digi-tools-feedback-rating .hidden.sc-digi-tools-feedback-rating {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-stars.sc-digi-tools-feedback-rating {\n  display: inline-flex;\n  flex-wrap: wrap;\n  max-height: 5rem;\n  margin-inline-end: 0.625rem;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-stars.sc-digi-tools-feedback-rating, .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__thankyou-text.sc-digi-tools-feedback-rating {\n  display: flex;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__thankyou-check-icon.sc-digi-tools-feedback-rating {\n  padding-right: 24px;\n  padding-top: 3px;\n  box-sizing: content-box;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating.sc-digi-tools-feedback-rating .step2.sc-digi-tools-feedback-rating .digi-tools-feedback-rating__heading.sc-digi-tools-feedback-rating {\n  margin-bottom: 0px;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-star-button.sc-digi-tools-feedback-rating {\n  background-color: unset;\n  border: unset;\n  cursor: pointer;\n  padding: var(--digi--gutter--smallest-3);\n  display: block;\n  position: relative;\n  margin-inline-end: 0.875rem;\n  height: 1.875rem;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-star-button.sc-digi-tools-feedback-rating:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon.sc-digi-tools-feedback-rating {\n  fill: none;\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon-border.sc-digi-tools-feedback-rating {\n  stroke: var(--digi--color--icon--primary);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__infographic-primary.sc-digi-tools-feedback-rating {\n  fill: var(--digi--color--infographic--brand--primary);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__star-rating-star-button.sc-digi-tools-feedback-rating:focus-visible .digi-tools-feedback-rating-star-icon.filled.sc-digi-tools-feedback-rating, .sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon.filled.sc-digi-tools-feedback-rating {\n  fill: var(--digi--color--icon--brand-primary);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating-star-icon.filled.sc-digi-tools-feedback-rating .digi-tools-feedback-rating-star-icon-border.sc-digi-tools-feedback-rating {\n  stroke: var(--digi--color--icon--brand-primary);\n}\n.sc-digi-tools-feedback-rating-h .digi-tools-feedback-rating__thankyou-text-with-rating.sc-digi-tools-feedback-rating {\n  margin-bottom: var(--digi--margin--medium);\n}";export{c as digi_tools_feedback_rating}