suus-component-library 0.1.16 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/banner-hero/banner-hero.d.ts +31 -0
- package/dist/components/banner-hero/banner-hero.d.ts.map +1 -0
- package/dist/components/form/button/Button.d.ts +1 -1
- package/dist/components/form/button/Button.d.ts.map +1 -1
- package/dist/components/form/radiobutton/RadioButton.d.ts.map +1 -1
- package/dist/components/form/switch/Switch.d.ts.map +1 -1
- package/dist/components/form/textfield/TextField.d.ts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/suus-component-library.css +1 -1
- package/dist/suus-component-library.js +311 -251
- package/dist/suus-component-library.umd.cjs +5 -1
- package/package.json +2 -2
|
@@ -1 +1,5 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react/jsx-runtime`),require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react/jsx-runtime`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`SUUS Component Library`]={},e.jsxRuntime,e.React))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r={suusButton:`_suusButton_1ucmz_1`,icon:`_icon_1ucmz_45`,label:`_label_1ucmz_62`,primary:`_primary_1ucmz_69`,secondary:`_secondary_1ucmz_113`,loading:`_loading_1ucmz_169`,loader:`_loader_1ucmz_173`,"btn-spin":`_btn-spin_1ucmz_1`,loaderSecondary:`_loaderSecondary_1ucmz_182`};function i({label:e,onClick:n,type:i=`button`,disabled:a=!1,loading:o=!1,variant:s=`primary`,colorToken:c=`--color-juice-sugarcane`,icon:l,...u}){return(0,t.jsx)(`button`,{type:i,onClick:n,disabled:a||o,style:{"--button-background-color":`var(${c})`},className:[r.suusButton,r[s],o?r.loading:``].filter(Boolean).join(` `),"aria-busy":o,...u,children:o?(0,t.jsx)(`span`,{className:`${r.loader} ${s===`primary`?``:r.loaderSecondary}`,"aria-hidden":`true`}):(0,t.jsxs)(t.Fragment,{children:[l?(0,t.jsx)(`span`,{className:r.icon,children:l}):null,(0,t.jsx)(`span`,{className:r.label,children:e})]})})}var a={checkboxWrapper:`_checkboxWrapper_y1lye_1`,checkboxInput:`_checkboxInput_y1lye_15`,checkboxLabel:`_checkboxLabel_y1lye_24`,customCheckbox:`_customCheckbox_y1lye_34`,checkIcon:`_checkIcon_y1lye_57`,checkboxText:`_checkboxText_y1lye_76`,checkboxWrapperDisabled:`_checkboxWrapperDisabled_y1lye_107`,checkboxWrapperError:`_checkboxWrapperError_y1lye_133`,errorMessage:`_errorMessage_y1lye_147`,checkboxWrapperGlassy:`_checkboxWrapperGlassy_y1lye_154`};function o({label:e,name:n,id:r,error:i,variant:o=`default`,className:s,disabled:c,...l}){let u=r??`${n}-checkbox`;return(0,t.jsxs)(`div`,{className:[a.checkboxWrapper,o===`glassy`?a.checkboxWrapperGlassy:``,i?a.checkboxWrapperError:``,c?a.checkboxWrapperDisabled:``,s??``].filter(Boolean).join(` `),children:[(0,t.jsx)(`input`,{type:`checkbox`,id:u,name:n,disabled:c,className:a.checkboxInput,"aria-invalid":!!i,"aria-describedby":i?`${n}-error`:void 0,...l}),(0,t.jsxs)(`label`,{htmlFor:u,className:a.checkboxLabel,children:[(0,t.jsx)(`span`,{className:a.customCheckbox,"aria-hidden":`true`,children:(0,t.jsx)(`svg`,{className:a.checkIcon,viewBox:`0 0 24 24`,focusable:`false`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M20 6L9 17L4 12`})})}),(0,t.jsx)(`span`,{className:a.checkboxText,children:e})]}),i&&(0,t.jsx)(`span`,{id:`${n}-error`,className:a.errorMessage,children:i})]})}var s={chip:`_chip_1po0g_1`,chipDefault:`_chipDefault_1po0g_21`,chipGlassy:`_chipGlassy_1po0g_36`,chipChecked:`_chipChecked_1po0g_49`,chipDisabled:`_chipDisabled_1po0g_56`};function c({children:e,variant:r=`default`,clickable:i=!0,checked:a,defaultChecked:o=!1,onCheckedChange:c,className:l,...u}){let[d,f]=(0,n.useState)(o),p=typeof a==`boolean`,m=p?a:d;function h(e){if(!i)return;let t=!m;p||f(t),c?.(t),u.onClick?.(e)}let g=r===`glassy`?s.chipGlassy:s.chipDefault,_=m?s.chipChecked:``,v=i?``:s.chipDisabled;return i?(0,t.jsx)(`button`,{type:`button`,"aria-pressed":m,className:[s.chip,g,_,l??``].filter(Boolean).join(` `),onClick:h,...u,children:e}):(0,t.jsx)(`span`,{className:[s.chip,g,_,v,l??``].filter(Boolean).join(` `),children:e})}var l={dateInputWrapper:`_dateInputWrapper_6osqj_1`,inputDateField:`_inputDateField_6osqj_6`,inputDateFieldGlassy:`_inputDateFieldGlassy_6osqj_38`,inputError:`_inputError_6osqj_56`,calendarIconButton:`_calendarIconButton_6osqj_60`,icon:`_icon_6osqj_88`,errorMessage:`_errorMessage_6osqj_97`};function u({label:e,name:r,id:i,value:a=null,maxDate:o,minDate:s,error:c,variant:u=`default`,className:m,ref:h,onDateChange:g,onBlur:_,disabled:v,...y}){let b=i??r,x=(0,n.useRef)(null),S=o??new Date;function C(e){x.current=e,typeof h==`function`?h(e):h&&(h.current=e)}function w(e){let t=e.target.value;if(!t){g?.(null);return}g?.(f(t))}function T(){v||(x.current?.showPicker?.(),x.current?.focus())}return(0,t.jsxs)(`div`,{className:`inputBlockVertical`,children:[(0,t.jsx)(`label`,{htmlFor:b,className:[`inputLabel`,u===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`div`,{className:l.dateInputWrapper,children:[(0,t.jsx)(`input`,{id:b,name:r,ref:C,type:`date`,value:d(a),max:d(S),min:s?d(s):void 0,disabled:v,onChange:w,onBlur:_,className:[l.inputDateField,u===`glassy`?l.inputDateFieldGlassy:``,c?l.inputError:``,m??``].filter(Boolean).join(` `),"aria-invalid":!!c,"aria-describedby":c?`${r}-error`:void 0,...y}),(0,t.jsx)(`button`,{type:`button`,className:l.calendarIconButton,onClick:T,disabled:v,"aria-label":`Datum auswählen`,tabIndex:-1,children:(0,t.jsx)(p,{})})]}),c&&(0,t.jsx)(`span`,{id:`${r}-error`,className:l.errorMessage,children:c})]})}function d(e){return e?`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`:``}function f(e){let[t,n,r]=e.split(`-`).map(Number);return new Date(t,n-1,r)}function p(){return(0,t.jsxs)(`svg`,{className:l.icon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`path`,{d:`M8 2V5`}),(0,t.jsx)(`path`,{d:`M16 2V5`}),(0,t.jsx)(`path`,{d:`M3.5 9.09H20.5`}),(0,t.jsx)(`path`,{d:`M21 8.5V17.5C21 20 19.75 21.5 16.75 21.5H7.25C4.25 21.5 3 20 3 17.5V8.5C3 6 4.25 4.5 7.25 4.5H16.75C19.75 4.5 21 6 21 8.5Z`})]})}var m={inputSelectField:`_inputSelectField_1uwtt_1`,inputSelectFieldGlassy:`_inputSelectFieldGlassy_1uwtt_12`,inputError:`_inputError_1uwtt_24`,errorMessage:`_errorMessage_1uwtt_28`};function h({label:e,name:n,options:r,placeholder:i,error:a,variant:o=`default`,className:s,disabled:c,...l}){return(0,t.jsxs)(`div`,{className:`inputBlockVertical`,children:[(0,t.jsx)(`label`,{htmlFor:n,className:[`inputLabel`,o===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`select`,{id:n,name:n,disabled:c,className:[m.inputSelectField,o===`glassy`?m.inputSelectFieldGlassy:``,a?m.inputError:``,s??``].filter(Boolean).join(` `),"aria-invalid":!!a,"aria-describedby":a?`${n}-error`:void 0,...l,children:[i&&(0,t.jsx)(`option`,{value:``,disabled:!0,children:i}),r.map(e=>(0,t.jsx)(`option`,{value:e.value,children:e.label},e.value))]}),a&&(0,t.jsx)(`span`,{id:`${n}-error`,className:m.errorMessage,children:a})]})}var g={appLink:`_appLink_b53rv_1`,appLinkDefault:`_appLinkDefault_b53rv_19`,appLinkGlassy:`_appLinkGlassy_b53rv_30`,label:`_label_b53rv_38`,icon:`_icon_b53rv_43`,arrowIcon:`_arrowIcon_b53rv_54`};function _({children:e,href:n,onClick:r,newTab:i=!1,showArrow:a=!0,variant:o=`default`,className:s,...c}){function l(e){n||e.preventDefault(),r?.(e)}return(0,t.jsxs)(`a`,{href:n??`#`,onClick:l,target:n&&i?`_blank`:void 0,rel:n&&i?`noopener noreferrer`:void 0,className:[g.appLink,o===`glassy`?g.appLinkGlassy:g.appLinkDefault,s??``].filter(Boolean).join(` `),...c,children:[(0,t.jsx)(`span`,{className:g.label,children:e}),a&&(0,t.jsx)(`span`,{className:g.icon,"aria-hidden":`true`,children:(0,t.jsx)(v,{})})]})}function v(){return(0,t.jsxs)(`svg`,{className:g.arrowIcon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`path`,{d:`M5 12H19`}),(0,t.jsx)(`path`,{d:`M13 6L19 12L13 18`})]})}var y={iconButton:`_iconButton_14rp3_1`,withFrame:`_withFrame_14rp3_17`,withoutFrame:`_withoutFrame_14rp3_24`,glassy:`_glassy_14rp3_57`,active:`_active_14rp3_75`,small:`_small_14rp3_84`,large:`_large_14rp3_90`,icon:`_icon_14rp3_1`,svgIcon:`_svgIcon_14rp3_102`};function b({label:e,icon:n,variant:r=`default`,frame:i=!0,active:a=!1,size:o=`default`,className:s,type:c=`button`,disabled:l,...u}){return(0,t.jsx)(`button`,{type:c,"aria-label":e,title:e,"aria-pressed":a,disabled:l,className:[y.iconButton,i?y.withFrame:y.withoutFrame,r===`glassy`?y.glassy:``,a?y.active:``,o===`small`?y.small:``,o===`large`?y.large:``,s??``].filter(Boolean).join(` `),...u,children:(0,t.jsx)(`span`,{className:y.icon,"aria-hidden":`true`,children:n})})}var x={passwordInputWrapper:`_passwordInputWrapper_18lit_1`,inputTextField:`_inputTextField_18lit_6`,inputTextFieldGlassy:`_inputTextFieldGlassy_18lit_18`,inputError:`_inputError_18lit_40`,togglePasswordButton:`_togglePasswordButton_18lit_44`,icon:`_icon_18lit_76`,errorMessage:`_errorMessage_18lit_85`};function S({label:e,name:r,id:i,error:a,variant:o=`default`,className:s,disabled:c,ref:l,autoComplete:u=`current-password`,...d}){let[f,p]=(0,n.useState)(!1),m=i??r;function h(){p(e=>!e)}return(0,t.jsxs)(`div`,{className:`inputBlockVertical`,children:[e&&(0,t.jsx)(`label`,{htmlFor:m,className:[`inputLabel`,o===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`div`,{className:x.passwordInputWrapper,children:[(0,t.jsx)(`input`,{id:m,name:r,ref:l,type:f?`text`:`password`,disabled:c,autoComplete:u,className:[x.inputTextField,o===`glassy`?x.inputTextFieldGlassy:``,a?x.inputError:``,s??``].filter(Boolean).join(` `),"aria-invalid":!!a,"aria-describedby":a?`${r}-error`:void 0,...d}),(0,t.jsx)(`button`,{type:`button`,className:x.togglePasswordButton,onClick:h,disabled:c,"aria-label":f?`Passwort ausblenden`:`Passwort anzeigen`,"aria-pressed":f,children:f?(0,t.jsx)(w,{}):(0,t.jsx)(C,{})})]}),a&&(0,t.jsx)(`span`,{id:`${r}-error`,className:x.errorMessage,children:a})]})}function C(){return(0,t.jsxs)(`svg`,{className:x.icon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`path`,{d:`M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z`}),(0,t.jsx)(`circle`,{cx:`12`,cy:`12`,r:`3`})]})}function w(){return(0,t.jsx)(`svg`,{className:x.icon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M17.94 17.94A10.94 10.94 0 0 1 12 20C7 20 2.73 16.11 1 12c.74-1.64 1.82-3.06 3.11-4.24m3.52-2.42A10.94 10.94 0 0 1 12 4c5 0 9.27 3.89 11 8-1.1 2.42-2.91 4.5-5.06 5.94M1 1l22 22`})})}var T={inputWrapper:`_inputWrapper_3w4be_1`,inputTextField:`_inputTextField_3w4be_6`,inputTextFieldGlassy:`_inputTextFieldGlassy_3w4be_18`,inputError:`_inputError_3w4be_48`,loading:`_loading_3w4be_52`,suggestionList:`_suggestionList_3w4be_61`,suggestionItem:`_suggestionItem_3w4be_78`,locality:`_locality_3w4be_98`,emptyState:`_emptyState_3w4be_102`,successMessage:`_successMessage_3w4be_113`,errorMessage:`_errorMessage_3w4be_119`};function E({label:e,name:r,id:i,error:a,variant:o=`default`,className:s,disabled:c,placeholder:l=`z.B. 8001 oder Zürich`,ref:u,onChange:d,onBlur:f,onValueChange:p,onSuggestionSelect:m,...h}){let g=(0,n.useId)(),_=i??`${r}-${g}`,v=(0,n.useRef)(null),y=(0,n.useRef)(!1),[b,x]=(0,n.useState)(``),[S,C]=(0,n.useState)([]),[w,E]=(0,n.useState)(!1),[D,O]=(0,n.useState)(!1),k=b.trim().match(/^(\d+)\s+(.+)$/),A=!!k,j=k?.[1],M=k?.[2],N=A&&S.some(e=>e.postalCode===j&&e.locality===M),P=/^\d+$/.test(b.trim()),F=b.trim().length>=4&&P&&!w,I=F&&S.some(e=>e.postalCode===b.trim()),L=F&&!I;D&&b.trim().length>=4&&S.length,(0,n.useEffect)(()=>{let e=b.trim();if(e.length<2){C([]),O(!1);return}if(y.current){y.current=!1;return}let t=new AbortController;async function n(){E(!0);try{let n=e.match(/^(\d+)\s/),r=n?n[1]:e,i=/^\d+$/.test(r)?`https://openplzapi.org/ch/Localities?postalCode=${r}`:`https://openplzapi.org/ch/Localities?locality=${encodeURIComponent(r)}`,a=await fetch(i,{signal:t.signal});if(!a.ok)throw Error(`Postal-Code-Suche fehlgeschlagen`);let o=await a.json();C(Array.from(new Map(o.map(e=>{let t=`${e.postalCode} ${e.name}`;return[t,{label:t,postalCode:e.postalCode,locality:e.name}]})).values()).slice(0,10)),O(!0)}catch(e){if(t.signal.aborted)return;console.error(e),C([]),O(!0)}finally{t.signal.aborted||E(!1)}}let r=window.setTimeout(n,300);return()=>{window.clearTimeout(r),t.abort()}},[b]);function R(e){v.current=e,typeof u==`function`?u(e):u&&(u.current=e)}function z(e){let t=e.target.value;x(t),p?.(t),d?.(e)}function B(e){y.current=!0,x(e.label),C([]),O(!1),p?.(e.label),m?.(e),v.current&&(v.current.value=e.label,v.current.dispatchEvent(new Event(`input`,{bubbles:!0})))}return(0,t.jsxs)(`div`,{className:`inputBlockVertical`,children:[(0,t.jsx)(`label`,{htmlFor:_,className:[`inputLabel`,o===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`div`,{className:T.inputWrapper,children:[(0,t.jsx)(`input`,{id:_,name:r,ref:R,type:`text`,inputMode:`search`,autoComplete:`postal-code`,disabled:c,placeholder:l,value:b,onChange:z,onBlur:f,className:[T.inputTextField,o===`glassy`?T.inputTextFieldGlassy:``,I||N?T.inputValid:``,L||a?T.inputError:``,s??``].filter(Boolean).join(` `),"aria-invalid":!!a||L,"aria-describedby":a?`${r}-error`:void 0,...h}),w&&(0,t.jsx)(`span`,{className:T.loading,children:`Lädt…`}),S.length>0&&(0,t.jsx)(`ul`,{className:T.suggestionList,children:S.map(e=>(0,t.jsx)(`li`,{children:(0,t.jsxs)(`button`,{type:`button`,className:T.suggestionItem,onMouseDown:e=>e.preventDefault(),onClick:()=>B(e),children:[(0,t.jsx)(`span`,{children:e.postalCode}),(0,t.jsx)(`span`,{className:T.locality,children:e.locality})]})},e.label))}),D&&b.trim().length>=2&&S.length===0&&!w&&!N&&!L&&(0,t.jsx)(`div`,{className:T.emptyState,children:`Keine Schweizer PLZ oder Ortschaft gefunden.`})]}),I&&(0,t.jsx)(`span`,{className:T.successMessage,children:`Gültige Schweizer Postleitzahl`}),N&&(0,t.jsx)(`span`,{className:T.successMessage,children:`Gültige Schweizer Postleitzahl`}),L&&(0,t.jsx)(`span`,{className:T.errorMessage,children:`Diese Schweizer Postleitzahl wurde nicht gefunden.`}),a&&(0,t.jsx)(`span`,{id:`${r}-error`,className:T.errorMessage,children:a})]})}var D={radioGroup:`_radioGroup_1ba3g_5`,optionGroup:`_optionGroup_1ba3g_17`,optionWrapper:`_optionWrapper_1ba3g_24`,optionWrapperDisabled:`_optionWrapperDisabled_1ba3g_30`,optionButton:`_optionButton_1ba3g_34`,radioInput:`_radioInput_1ba3g_38`,errorMessage:`_errorMessage_1ba3g_48`,optionTitle:`_optionTitle_1ba3g_90`,optionDescription:`_optionDescription_1ba3g_107`,radioLegend:`_radioLegend_1ba3g_114`,optionButtonDefault:`_optionButtonDefault_1ba3g_118`,optionButtonGlassy:`_optionButtonGlassy_1ba3g_146`,optionButtonError:`_optionButtonError_1ba3g_173`};function O({label:e,name:n,options:r,error:i,variant:a=`default`,disabled:o,value:s,defaultValue:c,onChange:l,...u}){let d=s!==void 0;return(0,t.jsxs)(`fieldset`,{className:[D.radioGroup].filter(Boolean).join(` `),"aria-invalid":!!i,"aria-describedby":i?`${n}-error`:void 0,children:[e&&(0,t.jsx)(`legend`,{className:[D.radioLegend,a===`glassy`?`inputLabelGlassy`:`inputLabel`].filter(Boolean).join(` `),children:e}),(0,t.jsx)(`div`,{className:D.optionGroup,children:r.map(e=>{let r=d?{checked:s===e.value}:{defaultChecked:c===e.value};return(0,t.jsxs)(`label`,{className:[D.optionWrapper,o?D.optionWrapperDisabled:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`input`,{type:`radio`,name:n,value:e.value,disabled:o,className:D.radioInput,onChange:l,...r,...u}),(0,t.jsxs)(`span`,{className:[D.optionButton,a===`glassy`?D.optionButtonGlassy:D.optionButtonDefault,i?D.optionButtonError:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`span`,{className:D.optionTitle,children:e.label}),e.description&&(0,t.jsx)(`span`,{className:D.optionDescription,children:e.description})]})]},e.value)})}),i&&(0,t.jsx)(`span`,{id:`${n}-error`,className:D.errorMessage,children:i})]})}var k={switchWrapper:`_switchWrapper_bre5n_1`,switchCheckbox:`_switchCheckbox_bre5n_7`,switchLabel:`_switchLabel_bre5n_15`,switchLabelDefault:`_switchLabelDefault_bre5n_24`,switchLabelGlassy:`_switchLabelGlassy_bre5n_28`,switchBackground:`_switchBackground_bre5n_37`,switchBackgroundDefault:`_switchBackgroundDefault_bre5n_56`,switchBackgroundGlassy:`_switchBackgroundGlassy_bre5n_66`,switchButton:`_switchButton_bre5n_77`,iconChecked:`_iconChecked_bre5n_163`,iconUnchecked:`_iconUnchecked_bre5n_164`,switchText:`_switchText_bre5n_200`,errorMessage:`_errorMessage_bre5n_206`};function A({name:e,id:n,label:r,error:i,variant:a=`default`,className:o,disabled:s,...c}){let l=n??`${e}-switch`;return(0,t.jsxs)(`div`,{className:[k.switchWrapper,o??``].filter(Boolean).join(` `),children:[(0,t.jsx)(`input`,{id:l,name:e,type:`checkbox`,disabled:s,className:k.switchCheckbox,"aria-invalid":!!i,"aria-describedby":i?`${e}-error`:void 0,...c}),(0,t.jsxs)(`label`,{htmlFor:l,className:[k.switchLabel,a===`glassy`?k.switchLabelGlassy:k.switchLabelDefault].filter(Boolean).join(` `),children:[(0,t.jsx)(`span`,{className:[k.switchBackground,a===`glassy`?k.switchBackgroundGlassy:k.switchBackgroundDefault].filter(Boolean).join(` `),children:(0,t.jsxs)(`span`,{className:k.switchButton,"aria-hidden":`true`,children:[(0,t.jsx)(`span`,{className:k.iconChecked,children:(0,t.jsx)(j,{})}),(0,t.jsx)(`span`,{className:k.iconUnchecked,children:(0,t.jsx)(M,{})})]})}),r&&(0,t.jsx)(`span`,{className:k.switchText,children:r})]}),i&&(0,t.jsx)(`span`,{id:`${e}-error`,className:k.errorMessage,children:i})]})}function j(){return(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M3 6.5L5.5 9L9 3`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})}function M(){return(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M3 3L9 9M9 3L3 9`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}var N={inputBlockVerticalTight:`_inputBlockVerticalTight_b8zs9_1`,inputTextField:`_inputTextField_b8zs9_6`,inputTextFieldGlassy:`_inputTextFieldGlassy_b8zs9_23`,inputError:`_inputError_b8zs9_45`,errorMessage:`_errorMessage_b8zs9_49`};function P({label:e,name:n,error:r,placeholder:i,variant:a=`default`,className:o,ref:s,...c}){return(0,t.jsxs)(`div`,{className:[`inputBlockVertical`,N.inputBlockVerticalTight].filter(Boolean).join(` `),children:[(0,t.jsx)(`label`,{htmlFor:n,className:[`inputLabel`,a===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsx)(`input`,{id:n,name:n,ref:s,placeholder:i,className:[N.inputTextField,a===`glassy`?N.inputTextFieldGlassy:``,r?N.inputError:``,o??``].filter(Boolean).join(` `),"aria-invalid":!!r,"aria-describedby":r?`${n}-error`:void 0,...c}),r&&(0,t.jsx)(`span`,{id:`${n}-error`,className:N.errorMessage,children:r})]})}var F={wrapper:`_wrapper_8acbw_1`,label:`_label_8acbw_7`,labelGlassy:`_labelGlassy_8acbw_13`,dropzone:`_dropzone_8acbw_17`,dropzoneGlassy:`_dropzoneGlassy_8acbw_32`,dragOver:`_dragOver_8acbw_39`,errorState:`_errorState_8acbw_48`,disabled:`_disabled_8acbw_52`,hiddenInput:`_hiddenInput_8acbw_57`,dropzoneContent:`_dropzoneContent_8acbw_65`,placeholder:`_placeholder_8acbw_74`,big:`_big_8acbw_80`,small:`_small_8acbw_86`,hint:`_hint_8acbw_91`,selected:`_selected_8acbw_111`,preview:`_preview_8acbw_118`,fileMeta:`_fileMeta_8acbw_127`,fileName:`_fileName_8acbw_134`,fileSize:`_fileSize_8acbw_142`,remove:`_remove_8acbw_156`,errorMessage:`_errorMessage_8acbw_198`};function I({label:e,name:r,id:i,file:a,error:o,variant:s=`default`,accept:c=`image/*`,maxSizeBytes:l=5*1024*1024,disabled:u,className:d,onChange:f,onFileChange:p,...m}){let h=(0,n.useId)(),g=i??`${r}-${h}`,[_,v]=(0,n.useState)(!1),[y,b]=(0,n.useState)(a??null),x=a!==void 0,S=x?a:y,C=(0,n.useMemo)(()=>!S||!S.type.startsWith(`image/`)?null:URL.createObjectURL(S),[S]);(0,n.useEffect)(()=>{x&&b(a??null)},[a,x]),(0,n.useEffect)(()=>()=>{C&&URL.revokeObjectURL(C)},[C]);function w(e){return!e||(c===`image/*`||c.startsWith(`image/`))&&!e.type.startsWith(`image/`)||l&&e.size>l?null:e}function T(e){let t=w(e);x||b(t),p?.(t)}function E(e){T(e.target.files?.[0]??null),f?.(e)}function D(e){e.preventDefault(),e.stopPropagation(),u||v(!0)}function O(e){e.preventDefault(),e.stopPropagation(),!e.currentTarget.contains(e.relatedTarget)&&v(!1)}function k(e){e.preventDefault(),e.stopPropagation(),v(!1),!u&&T(e.dataTransfer.files?.[0]??null)}function A(){x||b(null),p?.(null)}let j=Math.round(l/(1024*1024));return(0,t.jsxs)(`div`,{className:[F.wrapper,d??``].filter(Boolean).join(` `),children:[(0,t.jsx)(`label`,{className:[F.label,s===`glassy`?F.labelGlassy:``].filter(Boolean).join(` `),htmlFor:g,children:e}),(0,t.jsxs)(`div`,{className:[F.dropzone,s===`glassy`?F.dropzoneGlassy:``,_?F.dragOver:``,o?F.errorState:``,u?F.disabled:``].filter(Boolean).join(` `),onDragOver:D,onDragLeave:O,onDrop:k,children:[(0,t.jsx)(`input`,{id:g,name:r,className:F.hiddenInput,type:`file`,accept:c,disabled:u,onChange:E,"aria-invalid":!!o,"aria-describedby":o?`${r}-error`:void 0,...m}),(0,t.jsx)(`label`,{htmlFor:g,className:F.dropzoneContent,children:S?(0,t.jsxs)(`span`,{className:F.selected,children:[C&&(0,t.jsx)(`img`,{className:F.preview,src:C,alt:`Vorschau von ${S.name}`}),(0,t.jsxs)(`span`,{className:F.fileMeta,children:[(0,t.jsx)(`span`,{className:F.fileName,children:S.name}),(0,t.jsxs)(`span`,{className:F.fileSize,children:[(S.size/1024).toFixed(0),` KB ·`,` `,S.type||`unknown`]})]})]}):(0,t.jsxs)(`span`,{className:F.placeholder,children:[(0,t.jsx)(`span`,{className:F.big,children:`Datei hier reinziehen`}),(0,t.jsx)(`span`,{className:F.small,children:`…oder klicken, um auszuwählen`}),(0,t.jsxs)(`span`,{className:F.hint,children:[`Erlaubt: `,c,` · max. `,j,` MB`]})]})}),S&&(0,t.jsx)(`button`,{type:`button`,className:F.remove,onClick:A,disabled:u,children:`Entfernen`})]}),o&&(0,t.jsx)(`span`,{id:`${r}-error`,className:F.errorMessage,children:o})]})}e.Button=i,e.Checkbox=o,e.Chip=c,e.DatePicker=u,e.Dropdown=h,e.IconButton=b,e.Link=_,e.Password=S,e.PostalCode=E,e.RadioButton=O,e.Switch=A,e.TextField=P,e.Upload=I});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react/jsx-runtime`),require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react/jsx-runtime`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`SUUS Component Library`]={},e.jsxRuntime,e.React))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r={suusButton:`_suusButton_1ucmz_1`,icon:`_icon_1ucmz_45`,label:`_label_1ucmz_62`,primary:`_primary_1ucmz_69`,secondary:`_secondary_1ucmz_113`,loading:`_loading_1ucmz_169`,loader:`_loader_1ucmz_173`,"btn-spin":`_btn-spin_1ucmz_1`,loaderSecondary:`_loaderSecondary_1ucmz_182`};function i({label:e,onClick:n,type:i=`button`,disabled:a=!1,loading:o=!1,variant:s=`primary`,colorToken:c=`--color-juice-sugarcane`,icon:l,...u}){return(0,t.jsx)(`button`,{type:i,onClick:n,disabled:a||o,style:{"--button-background-color":`var(${c})`},className:[r.suusButton,r[s],o?r.loading:``].filter(Boolean).join(` `),"aria-busy":o,...u,children:o?(0,t.jsx)(`span`,{className:`${r.loader} ${s===`primary`?``:r.loaderSecondary}`,"aria-hidden":`true`}):(0,t.jsxs)(t.Fragment,{children:[l?(0,t.jsx)(`span`,{className:r.icon,children:l}):null,(0,t.jsx)(`span`,{className:r.label,children:e})]})})}var a=`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23e8f3ec'/%3E%3Cstop offset='100%25' stop-color='%23d7e6dc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='800' fill='url(%23g)'/%3E%3C/svg%3E`,o=e=>e===`--color-juice-sugarcane`||e===`--color-juice-tamarind`||e===`--color-juice-guarana`||e===`--color-juice-icetea`;function s({title:e,description:r,colorToken:s,imageBackgroundDesktop:c,imageBackgroundTablet:l,imageBackgroundMobile:u,fallbackImageSrc:d,labelButtonPrimary:f,actionButtonPrimary:p,labelButtonSecondary:m,actionButtonSecondary:h}){let[g,_]=(0,n.useState)(null),v=c?.trim(),y=l?.trim(),b=u?.trim(),x=d?.trim()||a,S=[v,y,b].filter(Boolean).join(`|`),C=!!v&&g!==S,w=o(s)?s:void 0,T=C?[b?`${b} 900w`:``,y?`${y} 1600w`:``,`${v} 2400w`].filter(Boolean).join(`, `):void 0;return(0,t.jsx)(`div`,{className:`content-child-max banner-hero`,children:(0,t.jsxs)(`div`,{className:`hero__container`,children:[(0,t.jsx)(`img`,{src:C?v:x,srcSet:T,sizes:T?`100vw`:void 0,className:`image-banner`,alt:`background`,onError:C?()=>_(S):void 0}),(0,t.jsxs)(`div`,{className:`hero__content`,style:s?{color:`var(${s})`}:void 0,children:[e&&e.split(`
|
|
2
|
+
`).map((n,r)=>(0,t.jsxs)(`span`,{className:`banner--title ${s||``}`,"data-testid":`bannerHeroTitle`,children:[n,r<e.split(`
|
|
3
|
+
`).length-1&&(0,t.jsx)(`br`,{})]},r)),(0,t.jsx)(`p`,{className:`banner--description`,children:r&&r.split(`
|
|
4
|
+
`).map((e,n)=>(0,t.jsxs)(`span`,{children:[e,n<r.split(`
|
|
5
|
+
`).length-1&&(0,t.jsx)(`br`,{})]},n))}),(0,t.jsxs)(`div`,{className:`banner-hero-buttonbar`,children:[f&&(0,t.jsx)(i,{label:f,variant:`primary`,colorToken:w,onClick:p}),m&&(0,t.jsx)(i,{label:m,variant:`secondary`,onClick:h})]})]})]})})}var c={checkboxWrapper:`_checkboxWrapper_y1lye_1`,checkboxInput:`_checkboxInput_y1lye_15`,checkboxLabel:`_checkboxLabel_y1lye_24`,customCheckbox:`_customCheckbox_y1lye_34`,checkIcon:`_checkIcon_y1lye_57`,checkboxText:`_checkboxText_y1lye_76`,checkboxWrapperDisabled:`_checkboxWrapperDisabled_y1lye_107`,checkboxWrapperError:`_checkboxWrapperError_y1lye_133`,errorMessage:`_errorMessage_y1lye_147`,checkboxWrapperGlassy:`_checkboxWrapperGlassy_y1lye_154`};function l({label:e,name:n,id:r,error:i,variant:a=`default`,className:o,disabled:s,...l}){let u=r??`${n}-checkbox`;return(0,t.jsxs)(`div`,{className:[c.checkboxWrapper,a===`glassy`?c.checkboxWrapperGlassy:``,i?c.checkboxWrapperError:``,s?c.checkboxWrapperDisabled:``,o??``].filter(Boolean).join(` `),children:[(0,t.jsx)(`input`,{type:`checkbox`,id:u,name:n,disabled:s,className:c.checkboxInput,"aria-invalid":!!i,"aria-describedby":i?`${n}-error`:void 0,...l}),(0,t.jsxs)(`label`,{htmlFor:u,className:c.checkboxLabel,children:[(0,t.jsx)(`span`,{className:c.customCheckbox,"aria-hidden":`true`,children:(0,t.jsx)(`svg`,{className:c.checkIcon,viewBox:`0 0 24 24`,focusable:`false`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M20 6L9 17L4 12`})})}),(0,t.jsx)(`span`,{className:c.checkboxText,children:e})]}),i&&(0,t.jsx)(`span`,{id:`${n}-error`,className:c.errorMessage,children:i})]})}var u={chip:`_chip_1po0g_1`,chipDefault:`_chipDefault_1po0g_21`,chipGlassy:`_chipGlassy_1po0g_36`,chipChecked:`_chipChecked_1po0g_49`,chipDisabled:`_chipDisabled_1po0g_56`};function d({children:e,variant:r=`default`,clickable:i=!0,checked:a,defaultChecked:o=!1,onCheckedChange:s,className:c,...l}){let[d,f]=(0,n.useState)(o),p=typeof a==`boolean`,m=p?a:d;function h(e){if(!i)return;let t=!m;p||f(t),s?.(t),l.onClick?.(e)}let g=r===`glassy`?u.chipGlassy:u.chipDefault,_=m?u.chipChecked:``,v=i?``:u.chipDisabled;return i?(0,t.jsx)(`button`,{type:`button`,"aria-pressed":m,className:[u.chip,g,_,c??``].filter(Boolean).join(` `),onClick:h,...l,children:e}):(0,t.jsx)(`span`,{className:[u.chip,g,_,v,c??``].filter(Boolean).join(` `),children:e})}var f={dateInputWrapper:`_dateInputWrapper_6osqj_1`,inputDateField:`_inputDateField_6osqj_6`,inputDateFieldGlassy:`_inputDateFieldGlassy_6osqj_38`,inputError:`_inputError_6osqj_56`,calendarIconButton:`_calendarIconButton_6osqj_60`,icon:`_icon_6osqj_88`,errorMessage:`_errorMessage_6osqj_97`};function p({label:e,name:r,id:i,value:a=null,maxDate:o,minDate:s,error:c,variant:l=`default`,className:u,ref:d,onDateChange:p,onBlur:_,disabled:v,...y}){let b=i??r,x=(0,n.useRef)(null),S=o??new Date;function C(e){x.current=e,typeof d==`function`?d(e):d&&(d.current=e)}function w(e){let t=e.target.value;if(!t){p?.(null);return}p?.(h(t))}function T(){v||(x.current?.showPicker?.(),x.current?.focus())}return(0,t.jsxs)(`div`,{className:`inputBlockVertical`,children:[(0,t.jsx)(`label`,{htmlFor:b,className:[`inputLabel`,l===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`div`,{className:f.dateInputWrapper,children:[(0,t.jsx)(`input`,{id:b,name:r,ref:C,type:`date`,value:m(a),max:m(S),min:s?m(s):void 0,disabled:v,onChange:w,onBlur:_,className:[f.inputDateField,l===`glassy`?f.inputDateFieldGlassy:``,c?f.inputError:``,u??``].filter(Boolean).join(` `),"aria-invalid":!!c,"aria-describedby":c?`${r}-error`:void 0,...y}),(0,t.jsx)(`button`,{type:`button`,className:f.calendarIconButton,onClick:T,disabled:v,"aria-label":`Datum auswählen`,tabIndex:-1,children:(0,t.jsx)(g,{})})]}),c&&(0,t.jsx)(`span`,{id:`${r}-error`,className:f.errorMessage,children:c})]})}function m(e){return e?`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`:``}function h(e){let[t,n,r]=e.split(`-`).map(Number);return new Date(t,n-1,r)}function g(){return(0,t.jsxs)(`svg`,{className:f.icon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`path`,{d:`M8 2V5`}),(0,t.jsx)(`path`,{d:`M16 2V5`}),(0,t.jsx)(`path`,{d:`M3.5 9.09H20.5`}),(0,t.jsx)(`path`,{d:`M21 8.5V17.5C21 20 19.75 21.5 16.75 21.5H7.25C4.25 21.5 3 20 3 17.5V8.5C3 6 4.25 4.5 7.25 4.5H16.75C19.75 4.5 21 6 21 8.5Z`})]})}var _={inputSelectField:`_inputSelectField_1uwtt_1`,inputSelectFieldGlassy:`_inputSelectFieldGlassy_1uwtt_12`,inputError:`_inputError_1uwtt_24`,errorMessage:`_errorMessage_1uwtt_28`};function v({label:e,name:n,options:r,placeholder:i,error:a,variant:o=`default`,className:s,disabled:c,...l}){return(0,t.jsxs)(`div`,{className:`inputBlockVertical`,children:[(0,t.jsx)(`label`,{htmlFor:n,className:[`inputLabel`,o===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`select`,{id:n,name:n,disabled:c,className:[_.inputSelectField,o===`glassy`?_.inputSelectFieldGlassy:``,a?_.inputError:``,s??``].filter(Boolean).join(` `),"aria-invalid":!!a,"aria-describedby":a?`${n}-error`:void 0,...l,children:[i&&(0,t.jsx)(`option`,{value:``,disabled:!0,children:i}),r.map(e=>(0,t.jsx)(`option`,{value:e.value,children:e.label},e.value))]}),a&&(0,t.jsx)(`span`,{id:`${n}-error`,className:_.errorMessage,children:a})]})}var y={appLink:`_appLink_b53rv_1`,appLinkDefault:`_appLinkDefault_b53rv_19`,appLinkGlassy:`_appLinkGlassy_b53rv_30`,label:`_label_b53rv_38`,icon:`_icon_b53rv_43`,arrowIcon:`_arrowIcon_b53rv_54`};function b({children:e,href:n,onClick:r,newTab:i=!1,showArrow:a=!0,variant:o=`default`,className:s,...c}){function l(e){n||e.preventDefault(),r?.(e)}return(0,t.jsxs)(`a`,{href:n??`#`,onClick:l,target:n&&i?`_blank`:void 0,rel:n&&i?`noopener noreferrer`:void 0,className:[y.appLink,o===`glassy`?y.appLinkGlassy:y.appLinkDefault,s??``].filter(Boolean).join(` `),...c,children:[(0,t.jsx)(`span`,{className:y.label,children:e}),a&&(0,t.jsx)(`span`,{className:y.icon,"aria-hidden":`true`,children:(0,t.jsx)(x,{})})]})}function x(){return(0,t.jsxs)(`svg`,{className:y.arrowIcon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`path`,{d:`M5 12H19`}),(0,t.jsx)(`path`,{d:`M13 6L19 12L13 18`})]})}var S={iconButton:`_iconButton_14rp3_1`,withFrame:`_withFrame_14rp3_17`,withoutFrame:`_withoutFrame_14rp3_24`,glassy:`_glassy_14rp3_57`,active:`_active_14rp3_75`,small:`_small_14rp3_84`,large:`_large_14rp3_90`,icon:`_icon_14rp3_1`,svgIcon:`_svgIcon_14rp3_102`};function C({label:e,icon:n,variant:r=`default`,frame:i=!0,active:a=!1,size:o=`default`,className:s,type:c=`button`,disabled:l,...u}){return(0,t.jsx)(`button`,{type:c,"aria-label":e,title:e,"aria-pressed":a,disabled:l,className:[S.iconButton,i?S.withFrame:S.withoutFrame,r===`glassy`?S.glassy:``,a?S.active:``,o===`small`?S.small:``,o===`large`?S.large:``,s??``].filter(Boolean).join(` `),...u,children:(0,t.jsx)(`span`,{className:S.icon,"aria-hidden":`true`,children:n})})}var w={passwordInputWrapper:`_passwordInputWrapper_18lit_1`,inputTextField:`_inputTextField_18lit_6`,inputTextFieldGlassy:`_inputTextFieldGlassy_18lit_18`,inputError:`_inputError_18lit_40`,togglePasswordButton:`_togglePasswordButton_18lit_44`,icon:`_icon_18lit_76`,errorMessage:`_errorMessage_18lit_85`};function T({label:e,name:r,id:i,error:a,variant:o=`default`,className:s,disabled:c,ref:l,autoComplete:u=`current-password`,...d}){let[f,p]=(0,n.useState)(!1),m=i??r;function h(){p(e=>!e)}return(0,t.jsxs)(`div`,{className:`inputBlockVertical`,children:[e&&(0,t.jsx)(`label`,{htmlFor:m,className:[`inputLabel`,o===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`div`,{className:w.passwordInputWrapper,children:[(0,t.jsx)(`input`,{id:m,name:r,ref:l,type:f?`text`:`password`,disabled:c,autoComplete:u,className:[w.inputTextField,o===`glassy`?w.inputTextFieldGlassy:``,a?w.inputError:``,s??``].filter(Boolean).join(` `),"aria-invalid":!!a,"aria-describedby":a?`${r}-error`:void 0,...d}),(0,t.jsx)(`button`,{type:`button`,className:w.togglePasswordButton,onClick:h,disabled:c,"aria-label":f?`Passwort ausblenden`:`Passwort anzeigen`,"aria-pressed":f,children:f?(0,t.jsx)(D,{}):(0,t.jsx)(E,{})})]}),a&&(0,t.jsx)(`span`,{id:`${r}-error`,className:w.errorMessage,children:a})]})}function E(){return(0,t.jsxs)(`svg`,{className:w.icon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`path`,{d:`M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z`}),(0,t.jsx)(`circle`,{cx:`12`,cy:`12`,r:`3`})]})}function D(){return(0,t.jsx)(`svg`,{className:w.icon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M17.94 17.94A10.94 10.94 0 0 1 12 20C7 20 2.73 16.11 1 12c.74-1.64 1.82-3.06 3.11-4.24m3.52-2.42A10.94 10.94 0 0 1 12 4c5 0 9.27 3.89 11 8-1.1 2.42-2.91 4.5-5.06 5.94M1 1l22 22`})})}var O={inputWrapper:`_inputWrapper_3w4be_1`,inputTextField:`_inputTextField_3w4be_6`,inputTextFieldGlassy:`_inputTextFieldGlassy_3w4be_18`,inputError:`_inputError_3w4be_48`,loading:`_loading_3w4be_52`,suggestionList:`_suggestionList_3w4be_61`,suggestionItem:`_suggestionItem_3w4be_78`,locality:`_locality_3w4be_98`,emptyState:`_emptyState_3w4be_102`,successMessage:`_successMessage_3w4be_113`,errorMessage:`_errorMessage_3w4be_119`};function k({label:e,name:r,id:i,error:a,variant:o=`default`,className:s,disabled:c,placeholder:l=`z.B. 8001 oder Zürich`,ref:u,onChange:d,onBlur:f,onValueChange:p,onSuggestionSelect:m,...h}){let g=(0,n.useId)(),_=i??`${r}-${g}`,v=(0,n.useRef)(null),y=(0,n.useRef)(!1),[b,x]=(0,n.useState)(``),[S,C]=(0,n.useState)([]),[w,T]=(0,n.useState)(!1),[E,D]=(0,n.useState)(!1),k=b.trim().match(/^(\d+)\s+(.+)$/),A=!!k,j=k?.[1],M=k?.[2],N=A&&S.some(e=>e.postalCode===j&&e.locality===M),P=/^\d+$/.test(b.trim()),F=b.trim().length>=4&&P&&!w,I=F&&S.some(e=>e.postalCode===b.trim()),L=F&&!I;E&&b.trim().length>=4&&S.length,(0,n.useEffect)(()=>{let e=b.trim();if(e.length<2){C([]),D(!1);return}if(y.current){y.current=!1;return}let t=new AbortController;async function n(){T(!0);try{let n=e.match(/^(\d+)\s/),r=n?n[1]:e,i=/^\d+$/.test(r)?`https://openplzapi.org/ch/Localities?postalCode=${r}`:`https://openplzapi.org/ch/Localities?locality=${encodeURIComponent(r)}`,a=await fetch(i,{signal:t.signal});if(!a.ok)throw Error(`Postal-Code-Suche fehlgeschlagen`);let o=await a.json();C(Array.from(new Map(o.map(e=>{let t=`${e.postalCode} ${e.name}`;return[t,{label:t,postalCode:e.postalCode,locality:e.name}]})).values()).slice(0,10)),D(!0)}catch(e){if(t.signal.aborted)return;console.error(e),C([]),D(!0)}finally{t.signal.aborted||T(!1)}}let r=window.setTimeout(n,300);return()=>{window.clearTimeout(r),t.abort()}},[b]);function R(e){v.current=e,typeof u==`function`?u(e):u&&(u.current=e)}function z(e){let t=e.target.value;x(t),p?.(t),d?.(e)}function B(e){y.current=!0,x(e.label),C([]),D(!1),p?.(e.label),m?.(e),v.current&&(v.current.value=e.label,v.current.dispatchEvent(new Event(`input`,{bubbles:!0})))}return(0,t.jsxs)(`div`,{className:`inputBlockVertical`,children:[(0,t.jsx)(`label`,{htmlFor:_,className:[`inputLabel`,o===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`div`,{className:O.inputWrapper,children:[(0,t.jsx)(`input`,{id:_,name:r,ref:R,type:`text`,inputMode:`search`,autoComplete:`postal-code`,disabled:c,placeholder:l,value:b,onChange:z,onBlur:f,className:[O.inputTextField,o===`glassy`?O.inputTextFieldGlassy:``,I||N?O.inputValid:``,L||a?O.inputError:``,s??``].filter(Boolean).join(` `),"aria-invalid":!!a||L,"aria-describedby":a?`${r}-error`:void 0,...h}),w&&(0,t.jsx)(`span`,{className:O.loading,children:`Lädt…`}),S.length>0&&(0,t.jsx)(`ul`,{className:O.suggestionList,children:S.map(e=>(0,t.jsx)(`li`,{children:(0,t.jsxs)(`button`,{type:`button`,className:O.suggestionItem,onMouseDown:e=>e.preventDefault(),onClick:()=>B(e),children:[(0,t.jsx)(`span`,{children:e.postalCode}),(0,t.jsx)(`span`,{className:O.locality,children:e.locality})]})},e.label))}),E&&b.trim().length>=2&&S.length===0&&!w&&!N&&!L&&(0,t.jsx)(`div`,{className:O.emptyState,children:`Keine Schweizer PLZ oder Ortschaft gefunden.`})]}),I&&(0,t.jsx)(`span`,{className:O.successMessage,children:`Gültige Schweizer Postleitzahl`}),N&&(0,t.jsx)(`span`,{className:O.successMessage,children:`Gültige Schweizer Postleitzahl`}),L&&(0,t.jsx)(`span`,{className:O.errorMessage,children:`Diese Schweizer Postleitzahl wurde nicht gefunden.`}),a&&(0,t.jsx)(`span`,{id:`${r}-error`,className:O.errorMessage,children:a})]})}var A={radioGroup:`_radioGroup_1ho8r_5`,optionGroup:`_optionGroup_1ho8r_15`,optionWrapper:`_optionWrapper_1ho8r_22`,optionWrapperDisabled:`_optionWrapperDisabled_1ho8r_28`,optionButton:`_optionButton_1ho8r_32`,radioInput:`_radioInput_1ho8r_36`,errorMessage:`_errorMessage_1ho8r_46`,optionTitle:`_optionTitle_1ho8r_88`,optionDescription:`_optionDescription_1ho8r_105`,optionButtonDefault:`_optionButtonDefault_1ho8r_113`,optionButtonGlassy:`_optionButtonGlassy_1ho8r_141`,optionButtonError:`_optionButtonError_1ho8r_168`};function j({label:e,name:n,options:r,error:i,variant:a=`default`,disabled:o,value:s,defaultValue:c,onChange:l,...u}){let d=s!==void 0;return(0,t.jsx)(`div`,{className:`inputBlockVertical`,children:(0,t.jsxs)(`fieldset`,{className:[A.radioGroup].filter(Boolean).join(` `),"aria-invalid":!!i,"aria-describedby":i?`${n}-error`:void 0,children:[e&&(0,t.jsx)(`legend`,{className:a===`glassy`?`inputLabelGlassy`:`inputLabel`,children:e}),(0,t.jsx)(`div`,{className:A.optionGroup,children:r.map(e=>{let r=d?{checked:s===e.value}:{defaultChecked:c===e.value};return(0,t.jsxs)(`label`,{className:[A.optionWrapper,o?A.optionWrapperDisabled:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`input`,{type:`radio`,name:n,value:e.value,disabled:o,className:A.radioInput,onChange:l,...r,...u}),(0,t.jsxs)(`span`,{className:[A.optionButton,a===`glassy`?A.optionButtonGlassy:A.optionButtonDefault,i?A.optionButtonError:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`span`,{className:A.optionTitle,children:e.label}),e.description&&(0,t.jsx)(`span`,{className:A.optionDescription,children:e.description})]})]},e.value)})}),i&&(0,t.jsx)(`span`,{id:`${n}-error`,className:A.errorMessage,children:i})]})})}var M={switchWrapper:`_switchWrapper_bre5n_1`,switchCheckbox:`_switchCheckbox_bre5n_7`,switchLabel:`_switchLabel_bre5n_15`,switchLabelDefault:`_switchLabelDefault_bre5n_24`,switchLabelGlassy:`_switchLabelGlassy_bre5n_28`,switchBackground:`_switchBackground_bre5n_37`,switchBackgroundDefault:`_switchBackgroundDefault_bre5n_56`,switchBackgroundGlassy:`_switchBackgroundGlassy_bre5n_66`,switchButton:`_switchButton_bre5n_77`,iconChecked:`_iconChecked_bre5n_163`,iconUnchecked:`_iconUnchecked_bre5n_164`,switchText:`_switchText_bre5n_200`,errorMessage:`_errorMessage_bre5n_206`};function N({name:e,id:n,label:r,error:i,variant:a=`default`,className:o,disabled:s,...c}){let l=n??`${e}-switch`;return(0,t.jsx)(`div`,{className:`inputBlockHorizontal`,children:(0,t.jsxs)(`div`,{className:[M.switchWrapper,o??``].filter(Boolean).join(` `),children:[(0,t.jsx)(`input`,{id:l,name:e,type:`checkbox`,disabled:s,className:M.switchCheckbox,"aria-invalid":!!i,"aria-describedby":i?`${e}-error`:void 0,...c}),(0,t.jsxs)(`label`,{htmlFor:l,className:[M.switchLabel,a===`glassy`?M.switchLabelGlassy:M.switchLabelDefault].filter(Boolean).join(` `),children:[(0,t.jsx)(`span`,{className:[M.switchBackground,a===`glassy`?M.switchBackgroundGlassy:M.switchBackgroundDefault].filter(Boolean).join(` `),children:(0,t.jsxs)(`span`,{className:M.switchButton,"aria-hidden":`true`,children:[(0,t.jsx)(`span`,{className:M.iconChecked,children:(0,t.jsx)(P,{})}),(0,t.jsx)(`span`,{className:M.iconUnchecked,children:(0,t.jsx)(F,{})})]})}),r&&(0,t.jsx)(`span`,{className:M.switchText,children:r})]}),i&&(0,t.jsx)(`span`,{id:`${e}-error`,className:M.errorMessage,children:i})]})})}function P(){return(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M3 6.5L5.5 9L9 3`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})}function F(){return(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M3 3L9 9M9 3L3 9`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}var I={inputLabel:`_inputLabel_1p880_1`,inputTextField:`_inputTextField_1p880_5`,inputTextFieldGlassy:`_inputTextFieldGlassy_1p880_22`,inputError:`_inputError_1p880_44`,errorMessage:`_errorMessage_1p880_48`};function L({label:e,name:n,error:r,placeholder:i,variant:a=`default`,className:o,ref:s,...c}){return(0,t.jsxs)(`div`,{className:`inputBlockVertical`,children:[(0,t.jsx)(`label`,{htmlFor:n,className:[I.inputLabel,a===`glassy`?`inputLabelGlassy`:``].filter(Boolean).join(` `),children:e}),(0,t.jsx)(`input`,{id:n,name:n,ref:s,placeholder:i,className:[I.inputTextField,a===`glassy`?I.inputTextFieldGlassy:``,r?I.inputError:``,o??``].filter(Boolean).join(` `),"aria-invalid":!!r,"aria-describedby":r?`${n}-error`:void 0,...c}),r&&(0,t.jsx)(`span`,{id:`${n}-error`,className:I.errorMessage,children:r})]})}var R={wrapper:`_wrapper_8acbw_1`,label:`_label_8acbw_7`,labelGlassy:`_labelGlassy_8acbw_13`,dropzone:`_dropzone_8acbw_17`,dropzoneGlassy:`_dropzoneGlassy_8acbw_32`,dragOver:`_dragOver_8acbw_39`,errorState:`_errorState_8acbw_48`,disabled:`_disabled_8acbw_52`,hiddenInput:`_hiddenInput_8acbw_57`,dropzoneContent:`_dropzoneContent_8acbw_65`,placeholder:`_placeholder_8acbw_74`,big:`_big_8acbw_80`,small:`_small_8acbw_86`,hint:`_hint_8acbw_91`,selected:`_selected_8acbw_111`,preview:`_preview_8acbw_118`,fileMeta:`_fileMeta_8acbw_127`,fileName:`_fileName_8acbw_134`,fileSize:`_fileSize_8acbw_142`,remove:`_remove_8acbw_156`,errorMessage:`_errorMessage_8acbw_198`};function z({label:e,name:r,id:i,file:a,error:o,variant:s=`default`,accept:c=`image/*`,maxSizeBytes:l=5*1024*1024,disabled:u,className:d,onChange:f,onFileChange:p,...m}){let h=(0,n.useId)(),g=i??`${r}-${h}`,[_,v]=(0,n.useState)(!1),[y,b]=(0,n.useState)(a??null),x=a!==void 0,S=x?a:y,C=(0,n.useMemo)(()=>!S||!S.type.startsWith(`image/`)?null:URL.createObjectURL(S),[S]);(0,n.useEffect)(()=>{x&&b(a??null)},[a,x]),(0,n.useEffect)(()=>()=>{C&&URL.revokeObjectURL(C)},[C]);function w(e){return!e||(c===`image/*`||c.startsWith(`image/`))&&!e.type.startsWith(`image/`)||l&&e.size>l?null:e}function T(e){let t=w(e);x||b(t),p?.(t)}function E(e){T(e.target.files?.[0]??null),f?.(e)}function D(e){e.preventDefault(),e.stopPropagation(),u||v(!0)}function O(e){e.preventDefault(),e.stopPropagation(),!e.currentTarget.contains(e.relatedTarget)&&v(!1)}function k(e){e.preventDefault(),e.stopPropagation(),v(!1),!u&&T(e.dataTransfer.files?.[0]??null)}function A(){x||b(null),p?.(null)}let j=Math.round(l/(1024*1024));return(0,t.jsxs)(`div`,{className:[R.wrapper,d??``].filter(Boolean).join(` `),children:[(0,t.jsx)(`label`,{className:[R.label,s===`glassy`?R.labelGlassy:``].filter(Boolean).join(` `),htmlFor:g,children:e}),(0,t.jsxs)(`div`,{className:[R.dropzone,s===`glassy`?R.dropzoneGlassy:``,_?R.dragOver:``,o?R.errorState:``,u?R.disabled:``].filter(Boolean).join(` `),onDragOver:D,onDragLeave:O,onDrop:k,children:[(0,t.jsx)(`input`,{id:g,name:r,className:R.hiddenInput,type:`file`,accept:c,disabled:u,onChange:E,"aria-invalid":!!o,"aria-describedby":o?`${r}-error`:void 0,...m}),(0,t.jsx)(`label`,{htmlFor:g,className:R.dropzoneContent,children:S?(0,t.jsxs)(`span`,{className:R.selected,children:[C&&(0,t.jsx)(`img`,{className:R.preview,src:C,alt:`Vorschau von ${S.name}`}),(0,t.jsxs)(`span`,{className:R.fileMeta,children:[(0,t.jsx)(`span`,{className:R.fileName,children:S.name}),(0,t.jsxs)(`span`,{className:R.fileSize,children:[(S.size/1024).toFixed(0),` KB ·`,` `,S.type||`unknown`]})]})]}):(0,t.jsxs)(`span`,{className:R.placeholder,children:[(0,t.jsx)(`span`,{className:R.big,children:`Datei hier reinziehen`}),(0,t.jsx)(`span`,{className:R.small,children:`…oder klicken, um auszuwählen`}),(0,t.jsxs)(`span`,{className:R.hint,children:[`Erlaubt: `,c,` · max. `,j,` MB`]})]})}),S&&(0,t.jsx)(`button`,{type:`button`,className:R.remove,onClick:A,disabled:u,children:`Entfernen`})]}),o&&(0,t.jsx)(`span`,{id:`${r}-error`,className:R.errorMessage,children:o})]})}e.BannerHero=s,e.Button=i,e.Checkbox=l,e.Chip=d,e.DatePicker=p,e.Dropdown=v,e.IconButton=C,e.Link=b,e.Password=T,e.PostalCode=k,e.RadioButton=j,e.Switch=N,e.TextField=L,e.Upload=z});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "suus-component-library",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.18",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/suus-component-library.umd.cjs",
|
|
6
6
|
"module": "./dist/suus-component-library.js",
|
|
@@ -51,6 +51,6 @@
|
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
53
|
"msw": "^2.14.6",
|
|
54
|
-
"suus-design-tokens": "^1.0.
|
|
54
|
+
"suus-design-tokens": "^1.0.26"
|
|
55
55
|
}
|
|
56
56
|
}
|