@abgov/react-components 4.13.1 → 4.13.2
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/package.json
CHANGED
package/react-components.esm.js
CHANGED
|
@@ -261,7 +261,7 @@ function create_if_block$h(ctx){let span;let t;return {c(){span=element("span");
|
|
|
261
261
|
`)){attr(div2,"class",div2_class_value);}if(dirty[0]&/*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot, isError*/226492546){toggle_class(div2,"error",/*isError*/ctx[27]);}if(dirty[0]&/*mt, mr, mb, ml, width*/1966592&&div3_style_value!==(div3_style_value=`
|
|
262
262
|
${calculateMargin(/*mt*/ctx[17],/*mr*/ctx[18],/*mb*/ctx[19],/*ml*/ctx[20])};
|
|
263
263
|
--width: ${/*width*/ctx[9]};
|
|
264
|
-
`)){attr(div3,"style",div3_style_value);}},i:noop,o:noop,d(detaching){if(detaching)detach(div3);if(if_block0)if_block0.d();if(if_block1)if_block1.d();/*input_binding*/ctx[39](null);if(if_block2)if_block2.d();if(if_block3)if_block3.d();if(if_block4)if_block4.d();/*div3_binding*/ctx[40](null);mounted=false;run_all(dispose);}};}function doClick(){this.dispatchEvent(new CustomEvent("_trailingIconClick",{composed:true}));}function instance$s($$self,$$props,$$invalidate){let handlesTrailingIconClick;let isFocused;let isReadonly;let isError;let isDisabled;const[Types,validateType]=typeValidator("Input type",["text","number","password","email","date","datetime-local","month","range","search","tel","time","url","week"]);const[AutoCapitalize,validateAutoCapitalize]=typeValidator("Input auto capitalize",["on","off","none","sentences","words","characters"]);let{type="text"}=$$props;let{name=""}=$$props;let{value=""}=$$props;let{autocapitalize="off"}=$$props;let{placeholder=""}=$$props;let{leadingicon=null}=$$props;let{trailingicon=null}=$$props;let{variant="goa"}=$$props;let{disabled="false"}=$$props;let{handletrailingiconclick="false"}=$$props;let{focused="false"}=$$props;let{readonly="false"}=$$props;let{error="false"}=$$props;let{testid=""}=$$props;let{width="30ch"}=$$props;let{arialabel=null}=$$props;let{min=""}=$$props;let{max=""}=$$props;let{step=1}=$$props;let{prefix=""}=$$props;let{suffix=""}=$$props;let{debounce=0}=$$props;let{maxlength=null}=$$props;let{mt=null}=$$props;let{mr=null}=$$props;let{mb=null}=$$props;let{ml=null}=$$props;let inputEl;let _rootEL;let _leadingContentSlot=false;let _trailingContentSlot=false;let _debounceId=null;function onKeyUp(e){const input=e.target;if(!input)return;if(isReadonly)return;if(_debounceId!=null){clearTimeout(_debounceId);}_debounceId=setTimeout(()=>{input.dispatchEvent(new CustomEvent("_change",{composed:true,bubbles:false,cancelable:true,detail:{name,value:input.value}}));},debounce);$$invalidate(0,value=input.value);}function onFocus(e){const input=e.target;input.dispatchEvent(new CustomEvent("_focus",{composed:true,detail:{name,value:input.value}}));}function onBlur(e){const input=e.target;input.dispatchEvent(new CustomEvent("_blur",{composed:true,detail:{name,value:input.value}}));}onMount(async()=>{await tick();validateType(type);validateAutoCapitalize(autocapitalize);if(prefix!=""||suffix!=""){console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");}const leadingContentSlot=_rootEL.querySelector("slot[name=leadingContent]");if(leadingContentSlot&&leadingContentSlot.assignedNodes().length>0){$$invalidate(23,_leadingContentSlot=true);}const trailingContentSlot=_rootEL.querySelector("slot[name=trailingContent]");if(trailingContentSlot&&trailingContentSlot.assignedNodes().length>0){$$invalidate(24,_trailingContentSlot=true);}});function input_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{inputEl=$$value;$$invalidate(21,inputEl);});}function div3_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootEL=$$value;$$invalidate(22,_rootEL);});}$$self.$$set=$$props=>{if('type'in $$props)$$invalidate(1,type=$$props.type);if('name'in $$props)$$invalidate(2,name=$$props.name);if('value'in $$props)$$invalidate(0,value=$$props.value);if('autocapitalize'in $$props)$$invalidate(3,autocapitalize=$$props.autocapitalize);if('placeholder'in $$props)$$invalidate(4,placeholder=$$props.placeholder);if('leadingicon'in $$props)$$invalidate(5,leadingicon=$$props.leadingicon);if('trailingicon'in $$props)$$invalidate(6,trailingicon=$$props.trailingicon);if('variant'in $$props)$$invalidate(7,variant=$$props.variant);if('disabled'in $$props)$$invalidate(32,disabled=$$props.disabled);if('handletrailingiconclick'in $$props)$$invalidate(33,handletrailingiconclick=$$props.handletrailingiconclick);if('focused'in $$props)$$invalidate(34,focused=$$props.focused);if('readonly'in $$props)$$invalidate(35,readonly=$$props.readonly);if('error'in $$props)$$invalidate(36,error=$$props.error);if('testid'in $$props)$$invalidate(8,testid=$$props.testid);if('width'in $$props)$$invalidate(9,width=$$props.width);if('arialabel'in $$props)$$invalidate(10,arialabel=$$props.arialabel);if('min'in $$props)$$invalidate(11,min=$$props.min);if('max'in $$props)$$invalidate(12,max=$$props.max);if('step'in $$props)$$invalidate(13,step=$$props.step);if('prefix'in $$props)$$invalidate(14,prefix=$$props.prefix);if('suffix'in $$props)$$invalidate(15,suffix=$$props.suffix);if('debounce'in $$props)$$invalidate(37,debounce=$$props.debounce);if('maxlength'in $$props)$$invalidate(16,maxlength=$$props.maxlength);if('mt'in $$props)$$invalidate(17,mt=$$props.mt);if('mr'in $$props)$$invalidate(18,mr=$$props.mr);if('mb'in $$props)$$invalidate(19,mb=$$props.mb);if('ml'in $$props)$$invalidate(20,ml=$$props.ml);};$$self.$$.update=()=>{if($$self.$$.dirty[1]&/*handletrailingiconclick*/4){$$invalidate(28,handlesTrailingIconClick=toBoolean(handletrailingiconclick));}if($$self.$$.dirty[1]&/*focused*/8){$$invalidate(38,isFocused=toBoolean(focused));}if($$self.$$.dirty[1]&/*readonly*/16){$$invalidate(25,isReadonly=toBoolean(readonly));}if($$self.$$.dirty[1]&/*error*/32){$$invalidate(27,isError=toBoolean(error));}if($$self.$$.dirty[1]&/*disabled*/2){$$invalidate(26,isDisabled=toBoolean(disabled));}if($$self.$$.dirty[0]&/*inputEl*/2097152|$$self.$$.dirty[1]&/*isFocused*/128){if(isFocused&&inputEl){setTimeout(()=>inputEl.focus(),1);}}if($$self.$$.dirty[0]&/*inputEl, type*/2097154){if(inputEl&&type==="search"){inputEl.addEventListener("search",e=>{onKeyUp(e);});}}};return [value,type,name,autocapitalize,placeholder,leadingicon,trailingicon,variant,testid,width,arialabel,min,max,step,prefix,suffix,maxlength,mt,mr,mb,ml,inputEl,_rootEL,_leadingContentSlot,_trailingContentSlot,isReadonly,isDisabled,isError,handlesTrailingIconClick,onKeyUp,onFocus,onBlur,disabled,handletrailingiconclick,focused,readonly,error,debounce,isFocused,input_binding,div3_binding];}class Input extends SvelteElement{constructor(options){super();const style=document.createElement('style');style.textContent=`:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus-within:not(.goa-input-leading-content):not(.goa-input-trailing-content){box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.75rem}.goa-input-trailing-icon{margin-right:var(--goa-space-s)}.goa-input-trailing-icon-button{margin-right:var(--goa-space-xs)}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-s);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:not(.goa-input-leading-content):not(.goa-input-trailing-content),.error:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.error .input-leading-content,.error .input-leading-content:hover,.error .input-trailing-content,.error .input-trailing-content:hover{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error .input-leading-content:focus,.error .input-trailing-content:focus,.error .input-leading-content:active,.error .input-trailing-content:active{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.input-leading-content:hover,.input-trailing-content:hover{box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);outline:var(--goa-border-width-s) solid var(--goa-color-interactive-hover)}.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);outline:var(--goa-border-width-s) solid var(--goa-color-greyscale-700)}.error .input-trailing-content,.input-trailing-content:hover,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m)}.error .input-leading-content,.input-leading-content:hover,.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within{border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.input-leading-content.input-trailing-content,.input-leading-content.input-trailing-content:hover,.input-leading-content.input-trailing-content:active,.input-leading-content.input-trailing-content:focus,.input-leading-content.input-trailing-content:focus-within{border-radius:0}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
|
|
264
|
+
`)){attr(div3,"style",div3_style_value);}},i:noop,o:noop,d(detaching){if(detaching)detach(div3);if(if_block0)if_block0.d();if(if_block1)if_block1.d();/*input_binding*/ctx[39](null);if(if_block2)if_block2.d();if(if_block3)if_block3.d();if(if_block4)if_block4.d();/*div3_binding*/ctx[40](null);mounted=false;run_all(dispose);}};}function doClick(){this.dispatchEvent(new CustomEvent("_trailingIconClick",{composed:true}));}function instance$s($$self,$$props,$$invalidate){let handlesTrailingIconClick;let isFocused;let isReadonly;let isError;let isDisabled;const[Types,validateType]=typeValidator("Input type",["text","number","password","email","date","datetime-local","month","range","search","tel","time","url","week"]);const[AutoCapitalize,validateAutoCapitalize]=typeValidator("Input auto capitalize",["on","off","none","sentences","words","characters"]);let{type="text"}=$$props;let{name=""}=$$props;let{value=""}=$$props;let{autocapitalize="off"}=$$props;let{placeholder=""}=$$props;let{leadingicon=null}=$$props;let{trailingicon=null}=$$props;let{variant="goa"}=$$props;let{disabled="false"}=$$props;let{handletrailingiconclick="false"}=$$props;let{focused="false"}=$$props;let{readonly="false"}=$$props;let{error="false"}=$$props;let{testid=""}=$$props;let{width="30ch"}=$$props;let{arialabel=null}=$$props;let{min=""}=$$props;let{max=""}=$$props;let{step=1}=$$props;let{prefix=""}=$$props;let{suffix=""}=$$props;let{debounce=0}=$$props;let{maxlength=null}=$$props;let{mt=null}=$$props;let{mr=null}=$$props;let{mb=null}=$$props;let{ml=null}=$$props;let inputEl;let _rootEL;let _leadingContentSlot=false;let _trailingContentSlot=false;let _debounceId=null;function onKeyUp(e){const input=e.target;if(!input)return;if(isReadonly)return;if(_debounceId!=null){clearTimeout(_debounceId);}_debounceId=setTimeout(()=>{input.dispatchEvent(new CustomEvent("_change",{composed:true,bubbles:false,cancelable:true,detail:{name,value:input.value}}));},debounce);$$invalidate(0,value=input.value);}function onFocus(e){const input=e.target;input.dispatchEvent(new CustomEvent("_focus",{composed:true,detail:{name,value:input.value}}));}function onBlur(e){const input=e.target;input.dispatchEvent(new CustomEvent("_blur",{composed:true,detail:{name,value:input.value}}));}onMount(async()=>{await tick();validateType(type);validateAutoCapitalize(autocapitalize);if(prefix!=""||suffix!=""){console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");}const leadingContentSlot=_rootEL.querySelector("slot[name=leadingContent]");if(leadingContentSlot&&leadingContentSlot.assignedNodes().length>0){$$invalidate(23,_leadingContentSlot=true);}const trailingContentSlot=_rootEL.querySelector("slot[name=trailingContent]");if(trailingContentSlot&&trailingContentSlot.assignedNodes().length>0){$$invalidate(24,_trailingContentSlot=true);}});function input_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{inputEl=$$value;$$invalidate(21,inputEl);});}function div3_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootEL=$$value;$$invalidate(22,_rootEL);});}$$self.$$set=$$props=>{if('type'in $$props)$$invalidate(1,type=$$props.type);if('name'in $$props)$$invalidate(2,name=$$props.name);if('value'in $$props)$$invalidate(0,value=$$props.value);if('autocapitalize'in $$props)$$invalidate(3,autocapitalize=$$props.autocapitalize);if('placeholder'in $$props)$$invalidate(4,placeholder=$$props.placeholder);if('leadingicon'in $$props)$$invalidate(5,leadingicon=$$props.leadingicon);if('trailingicon'in $$props)$$invalidate(6,trailingicon=$$props.trailingicon);if('variant'in $$props)$$invalidate(7,variant=$$props.variant);if('disabled'in $$props)$$invalidate(32,disabled=$$props.disabled);if('handletrailingiconclick'in $$props)$$invalidate(33,handletrailingiconclick=$$props.handletrailingiconclick);if('focused'in $$props)$$invalidate(34,focused=$$props.focused);if('readonly'in $$props)$$invalidate(35,readonly=$$props.readonly);if('error'in $$props)$$invalidate(36,error=$$props.error);if('testid'in $$props)$$invalidate(8,testid=$$props.testid);if('width'in $$props)$$invalidate(9,width=$$props.width);if('arialabel'in $$props)$$invalidate(10,arialabel=$$props.arialabel);if('min'in $$props)$$invalidate(11,min=$$props.min);if('max'in $$props)$$invalidate(12,max=$$props.max);if('step'in $$props)$$invalidate(13,step=$$props.step);if('prefix'in $$props)$$invalidate(14,prefix=$$props.prefix);if('suffix'in $$props)$$invalidate(15,suffix=$$props.suffix);if('debounce'in $$props)$$invalidate(37,debounce=$$props.debounce);if('maxlength'in $$props)$$invalidate(16,maxlength=$$props.maxlength);if('mt'in $$props)$$invalidate(17,mt=$$props.mt);if('mr'in $$props)$$invalidate(18,mr=$$props.mr);if('mb'in $$props)$$invalidate(19,mb=$$props.mb);if('ml'in $$props)$$invalidate(20,ml=$$props.ml);};$$self.$$.update=()=>{if($$self.$$.dirty[1]&/*handletrailingiconclick*/4){$$invalidate(28,handlesTrailingIconClick=toBoolean(handletrailingiconclick));}if($$self.$$.dirty[1]&/*focused*/8){$$invalidate(38,isFocused=toBoolean(focused));}if($$self.$$.dirty[1]&/*readonly*/16){$$invalidate(25,isReadonly=toBoolean(readonly));}if($$self.$$.dirty[1]&/*error*/32){$$invalidate(27,isError=toBoolean(error));}if($$self.$$.dirty[1]&/*disabled*/2){$$invalidate(26,isDisabled=toBoolean(disabled));}if($$self.$$.dirty[0]&/*inputEl*/2097152|$$self.$$.dirty[1]&/*isFocused*/128){if(isFocused&&inputEl){setTimeout(()=>inputEl.focus(),1);}}if($$self.$$.dirty[0]&/*inputEl, type*/2097154){if(inputEl&&type==="search"){inputEl.addEventListener("search",e=>{onKeyUp(e);});}}};return [value,type,name,autocapitalize,placeholder,leadingicon,trailingicon,variant,testid,width,arialabel,min,max,step,prefix,suffix,maxlength,mt,mr,mb,ml,inputEl,_rootEL,_leadingContentSlot,_trailingContentSlot,isReadonly,isDisabled,isError,handlesTrailingIconClick,onKeyUp,onFocus,onBlur,disabled,handletrailingiconclick,focused,readonly,error,debounce,isFocused,input_binding,div3_binding];}class Input extends SvelteElement{constructor(options){super();const style=document.createElement('style');style.textContent=`:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus-within:not(.goa-input-leading-content):not(.goa-input-trailing-content){box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.75rem}.goa-input-trailing-icon{margin-right:var(--goa-space-s)}.goa-input-trailing-icon-button{margin-right:var(--goa-space-xs)}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs) var(--goa-space-s);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:not(.goa-input-leading-content):not(.goa-input-trailing-content),.error:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.error .input-leading-content,.error .input-leading-content:hover,.error .input-trailing-content,.error .input-trailing-content:hover{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error .input-leading-content:focus,.error .input-trailing-content:focus,.error .input-leading-content:active,.error .input-trailing-content:active{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.input-leading-content:hover,.input-trailing-content:hover{box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);outline:var(--goa-border-width-s) solid var(--goa-color-interactive-hover)}.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);outline:var(--goa-border-width-s) solid var(--goa-color-greyscale-700)}.error .input-trailing-content,.input-trailing-content:hover,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m)}.error .input-leading-content,.input-leading-content:hover,.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within{border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.input-leading-content.input-trailing-content,.input-leading-content.input-trailing-content:hover,.input-leading-content.input-trailing-content:active,.input-leading-content.input-trailing-content:focus,.input-leading-content.input-trailing-content:focus-within{border-radius:0}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
|
|
265
265
|
center center no-repeat}`;this.shadowRoot.appendChild(style);init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$s,create_fragment$v,safe_not_equal,{type:1,name:2,value:0,autocapitalize:3,placeholder:4,leadingicon:5,trailingicon:6,variant:7,disabled:32,handletrailingiconclick:33,focused:34,readonly:35,error:36,testid:8,width:9,arialabel:10,min:11,max:12,step:13,prefix:14,suffix:15,debounce:37,maxlength:16,mt:17,mr:18,mb:19,ml:20},null,[-1,-1]);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["type","name","value","autocapitalize","placeholder","leadingicon","trailingicon","variant","disabled","handletrailingiconclick","focused","readonly","error","testid","width","arialabel","min","max","step","prefix","suffix","debounce","maxlength","mt","mr","mb","ml"];}get type(){return this.$$.ctx[1];}set type(type){this.$$set({type});flush();}get name(){return this.$$.ctx[2];}set name(name){this.$$set({name});flush();}get value(){return this.$$.ctx[0];}set value(value){this.$$set({value});flush();}get autocapitalize(){return this.$$.ctx[3];}set autocapitalize(autocapitalize){this.$$set({autocapitalize});flush();}get placeholder(){return this.$$.ctx[4];}set placeholder(placeholder){this.$$set({placeholder});flush();}get leadingicon(){return this.$$.ctx[5];}set leadingicon(leadingicon){this.$$set({leadingicon});flush();}get trailingicon(){return this.$$.ctx[6];}set trailingicon(trailingicon){this.$$set({trailingicon});flush();}get variant(){return this.$$.ctx[7];}set variant(variant){this.$$set({variant});flush();}get disabled(){return this.$$.ctx[32];}set disabled(disabled){this.$$set({disabled});flush();}get handletrailingiconclick(){return this.$$.ctx[33];}set handletrailingiconclick(handletrailingiconclick){this.$$set({handletrailingiconclick});flush();}get focused(){return this.$$.ctx[34];}set focused(focused){this.$$set({focused});flush();}get readonly(){return this.$$.ctx[35];}set readonly(readonly){this.$$set({readonly});flush();}get error(){return this.$$.ctx[36];}set error(error){this.$$set({error});flush();}get testid(){return this.$$.ctx[8];}set testid(testid){this.$$set({testid});flush();}get width(){return this.$$.ctx[9];}set width(width){this.$$set({width});flush();}get arialabel(){return this.$$.ctx[10];}set arialabel(arialabel){this.$$set({arialabel});flush();}get min(){return this.$$.ctx[11];}set min(min){this.$$set({min});flush();}get max(){return this.$$.ctx[12];}set max(max){this.$$set({max});flush();}get step(){return this.$$.ctx[13];}set step(step){this.$$set({step});flush();}get prefix(){return this.$$.ctx[14];}set prefix(prefix){this.$$set({prefix});flush();}get suffix(){return this.$$.ctx[15];}set suffix(suffix){this.$$set({suffix});flush();}get debounce(){return this.$$.ctx[37];}set debounce(debounce){this.$$set({debounce});flush();}get maxlength(){return this.$$.ctx[16];}set maxlength(maxlength){this.$$set({maxlength});flush();}get mt(){return this.$$.ctx[17];}set mt(mt){this.$$set({mt});flush();}get mr(){return this.$$.ctx[18];}set mr(mr){this.$$set({mr});flush();}get mb(){return this.$$.ctx[19];}set mb(mb){this.$$set({mb});flush();}get ml(){return this.$$.ctx[20];}set ml(ml){this.$$set({ml});flush();}}customElements.define("goa-input",Input);/* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.59.2 */function create_if_block_3$7(ctx){let div;return {c(){div=element("div");div.innerHTML=`An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;attr(div,"data-testid","type");attr(div,"class","site-text");},m(target,anchor){insert(target,div,anchor);},d(detaching){if(detaching)detach(div);}};}// (31:4) {#if ["alpha", "beta"].includes(type)}
|
|
266
266
|
function create_if_block_1$8(ctx){let div0;let t0_value=capitalize(/*type*/ctx[0])+"";let t0;let div0_class_value;let t1;let div1;let t2;let a;let t4;let if_block=/*feedbackurl*/ctx[2]&&create_if_block_2$7(ctx);return {c(){div0=element("div");t0=text(t0_value);t1=space();div1=element("div");t2=text("This is a new ");a=element("a");a.textContent="Alberta Government";t4=text(" service\n ");if(if_block)if_block.c();attr(div0,"data-testid","type");attr(div0,"class",div0_class_value="service-type service-type--"+/*type*/ctx[0].toLowerCase());attr(a,"href","https://www.alberta.ca/index.aspx");attr(div1,"data-testid","site-text");attr(div1,"class","site-text");},m(target,anchor){insert(target,div0,anchor);append(div0,t0);insert(target,t1,anchor);insert(target,div1,anchor);append(div1,t2);append(div1,a);append(div1,t4);if(if_block)if_block.m(div1,null);},p(ctx,dirty){if(dirty&/*type*/1&&t0_value!==(t0_value=capitalize(/*type*/ctx[0])+""))set_data(t0,t0_value);if(dirty&/*type*/1&&div0_class_value!==(div0_class_value="service-type service-type--"+/*type*/ctx[0].toLowerCase())){attr(div0,"class",div0_class_value);}if(/*feedbackurl*/ctx[2]){if(if_block){if_block.p(ctx,dirty);}else {if_block=create_if_block_2$7(ctx);if_block.c();if_block.m(div1,null);}}else if(if_block){if_block.d(1);if_block=null;}},d(detaching){if(detaching)detach(div0);if(detaching)detach(t1);if(detaching)detach(div1);if(if_block)if_block.d();}};}// (40:8) {#if feedbackurl}
|
|
267
267
|
function create_if_block_2$7(ctx){let span;let t0;let a;let t1;return {c(){span=element("span");t0=text("— help us improve it by giving ");a=element("a");t1=text("feedback");attr(a,"href",/*feedbackurl*/ctx[2]);attr(span,"data-testid","feedback");},m(target,anchor){insert(target,span,anchor);append(span,t0);append(span,a);append(a,t1);},p(ctx,dirty){if(dirty&/*feedbackurl*/4){attr(a,"href",/*feedbackurl*/ctx[2]);}},d(detaching){if(detaching)detach(span);}};}// (46:4) {#if version}
|
package/react-components.umd.js
CHANGED
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
`)){attr(div2,"class",div2_class_value);}if(dirty[0]&/*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot, isError*/226492546){toggle_class(div2,"error",/*isError*/ctx[27]);}if(dirty[0]&/*mt, mr, mb, ml, width*/1966592&&div3_style_value!==(div3_style_value=`
|
|
264
264
|
${calculateMargin(/*mt*/ctx[17],/*mr*/ctx[18],/*mb*/ctx[19],/*ml*/ctx[20])};
|
|
265
265
|
--width: ${/*width*/ctx[9]};
|
|
266
|
-
`)){attr(div3,"style",div3_style_value);}},i:noop,o:noop,d(detaching){if(detaching)detach(div3);if(if_block0)if_block0.d();if(if_block1)if_block1.d();/*input_binding*/ctx[39](null);if(if_block2)if_block2.d();if(if_block3)if_block3.d();if(if_block4)if_block4.d();/*div3_binding*/ctx[40](null);mounted=false;run_all(dispose);}};}function doClick(){this.dispatchEvent(new CustomEvent("_trailingIconClick",{composed:true}));}function instance$s($$self,$$props,$$invalidate){let handlesTrailingIconClick;let isFocused;let isReadonly;let isError;let isDisabled;const[Types,validateType]=typeValidator("Input type",["text","number","password","email","date","datetime-local","month","range","search","tel","time","url","week"]);const[AutoCapitalize,validateAutoCapitalize]=typeValidator("Input auto capitalize",["on","off","none","sentences","words","characters"]);let{type="text"}=$$props;let{name=""}=$$props;let{value=""}=$$props;let{autocapitalize="off"}=$$props;let{placeholder=""}=$$props;let{leadingicon=null}=$$props;let{trailingicon=null}=$$props;let{variant="goa"}=$$props;let{disabled="false"}=$$props;let{handletrailingiconclick="false"}=$$props;let{focused="false"}=$$props;let{readonly="false"}=$$props;let{error="false"}=$$props;let{testid=""}=$$props;let{width="30ch"}=$$props;let{arialabel=null}=$$props;let{min=""}=$$props;let{max=""}=$$props;let{step=1}=$$props;let{prefix=""}=$$props;let{suffix=""}=$$props;let{debounce=0}=$$props;let{maxlength=null}=$$props;let{mt=null}=$$props;let{mr=null}=$$props;let{mb=null}=$$props;let{ml=null}=$$props;let inputEl;let _rootEL;let _leadingContentSlot=false;let _trailingContentSlot=false;let _debounceId=null;function onKeyUp(e){const input=e.target;if(!input)return;if(isReadonly)return;if(_debounceId!=null){clearTimeout(_debounceId);}_debounceId=setTimeout(()=>{input.dispatchEvent(new CustomEvent("_change",{composed:true,bubbles:false,cancelable:true,detail:{name,value:input.value}}));},debounce);$$invalidate(0,value=input.value);}function onFocus(e){const input=e.target;input.dispatchEvent(new CustomEvent("_focus",{composed:true,detail:{name,value:input.value}}));}function onBlur(e){const input=e.target;input.dispatchEvent(new CustomEvent("_blur",{composed:true,detail:{name,value:input.value}}));}onMount(function(){return _call(tick,function(){validateType(type);validateAutoCapitalize(autocapitalize);if(prefix!=""||suffix!=""){console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");}const leadingContentSlot=_rootEL.querySelector("slot[name=leadingContent]");if(leadingContentSlot&&leadingContentSlot.assignedNodes().length>0){$$invalidate(23,_leadingContentSlot=true);}const trailingContentSlot=_rootEL.querySelector("slot[name=trailingContent]");if(trailingContentSlot&&trailingContentSlot.assignedNodes().length>0){$$invalidate(24,_trailingContentSlot=true);}});});function input_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{inputEl=$$value;$$invalidate(21,inputEl);});}function div3_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootEL=$$value;$$invalidate(22,_rootEL);});}$$self.$$set=$$props=>{if('type'in $$props)$$invalidate(1,type=$$props.type);if('name'in $$props)$$invalidate(2,name=$$props.name);if('value'in $$props)$$invalidate(0,value=$$props.value);if('autocapitalize'in $$props)$$invalidate(3,autocapitalize=$$props.autocapitalize);if('placeholder'in $$props)$$invalidate(4,placeholder=$$props.placeholder);if('leadingicon'in $$props)$$invalidate(5,leadingicon=$$props.leadingicon);if('trailingicon'in $$props)$$invalidate(6,trailingicon=$$props.trailingicon);if('variant'in $$props)$$invalidate(7,variant=$$props.variant);if('disabled'in $$props)$$invalidate(32,disabled=$$props.disabled);if('handletrailingiconclick'in $$props)$$invalidate(33,handletrailingiconclick=$$props.handletrailingiconclick);if('focused'in $$props)$$invalidate(34,focused=$$props.focused);if('readonly'in $$props)$$invalidate(35,readonly=$$props.readonly);if('error'in $$props)$$invalidate(36,error=$$props.error);if('testid'in $$props)$$invalidate(8,testid=$$props.testid);if('width'in $$props)$$invalidate(9,width=$$props.width);if('arialabel'in $$props)$$invalidate(10,arialabel=$$props.arialabel);if('min'in $$props)$$invalidate(11,min=$$props.min);if('max'in $$props)$$invalidate(12,max=$$props.max);if('step'in $$props)$$invalidate(13,step=$$props.step);if('prefix'in $$props)$$invalidate(14,prefix=$$props.prefix);if('suffix'in $$props)$$invalidate(15,suffix=$$props.suffix);if('debounce'in $$props)$$invalidate(37,debounce=$$props.debounce);if('maxlength'in $$props)$$invalidate(16,maxlength=$$props.maxlength);if('mt'in $$props)$$invalidate(17,mt=$$props.mt);if('mr'in $$props)$$invalidate(18,mr=$$props.mr);if('mb'in $$props)$$invalidate(19,mb=$$props.mb);if('ml'in $$props)$$invalidate(20,ml=$$props.ml);};$$self.$$.update=()=>{if($$self.$$.dirty[1]&/*handletrailingiconclick*/4){$$invalidate(28,handlesTrailingIconClick=toBoolean(handletrailingiconclick));}if($$self.$$.dirty[1]&/*focused*/8){$$invalidate(38,isFocused=toBoolean(focused));}if($$self.$$.dirty[1]&/*readonly*/16){$$invalidate(25,isReadonly=toBoolean(readonly));}if($$self.$$.dirty[1]&/*error*/32){$$invalidate(27,isError=toBoolean(error));}if($$self.$$.dirty[1]&/*disabled*/2){$$invalidate(26,isDisabled=toBoolean(disabled));}if($$self.$$.dirty[0]&/*inputEl*/2097152|$$self.$$.dirty[1]&/*isFocused*/128){if(isFocused&&inputEl){setTimeout(()=>inputEl.focus(),1);}}if($$self.$$.dirty[0]&/*inputEl, type*/2097154){if(inputEl&&type==="search"){inputEl.addEventListener("search",e=>{onKeyUp(e);});}}};return [value,type,name,autocapitalize,placeholder,leadingicon,trailingicon,variant,testid,width,arialabel,min,max,step,prefix,suffix,maxlength,mt,mr,mb,ml,inputEl,_rootEL,_leadingContentSlot,_trailingContentSlot,isReadonly,isDisabled,isError,handlesTrailingIconClick,onKeyUp,onFocus,onBlur,disabled,handletrailingiconclick,focused,readonly,error,debounce,isFocused,input_binding,div3_binding];}class Input extends SvelteElement{constructor(options){super();const style=document.createElement('style');style.textContent=`:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus-within:not(.goa-input-leading-content):not(.goa-input-trailing-content){box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.75rem}.goa-input-trailing-icon{margin-right:var(--goa-space-s)}.goa-input-trailing-icon-button{margin-right:var(--goa-space-xs)}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-s);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:not(.goa-input-leading-content):not(.goa-input-trailing-content),.error:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.error .input-leading-content,.error .input-leading-content:hover,.error .input-trailing-content,.error .input-trailing-content:hover{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error .input-leading-content:focus,.error .input-trailing-content:focus,.error .input-leading-content:active,.error .input-trailing-content:active{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.input-leading-content:hover,.input-trailing-content:hover{box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);outline:var(--goa-border-width-s) solid var(--goa-color-interactive-hover)}.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);outline:var(--goa-border-width-s) solid var(--goa-color-greyscale-700)}.error .input-trailing-content,.input-trailing-content:hover,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m)}.error .input-leading-content,.input-leading-content:hover,.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within{border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.input-leading-content.input-trailing-content,.input-leading-content.input-trailing-content:hover,.input-leading-content.input-trailing-content:active,.input-leading-content.input-trailing-content:focus,.input-leading-content.input-trailing-content:focus-within{border-radius:0}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
|
|
266
|
+
`)){attr(div3,"style",div3_style_value);}},i:noop,o:noop,d(detaching){if(detaching)detach(div3);if(if_block0)if_block0.d();if(if_block1)if_block1.d();/*input_binding*/ctx[39](null);if(if_block2)if_block2.d();if(if_block3)if_block3.d();if(if_block4)if_block4.d();/*div3_binding*/ctx[40](null);mounted=false;run_all(dispose);}};}function doClick(){this.dispatchEvent(new CustomEvent("_trailingIconClick",{composed:true}));}function instance$s($$self,$$props,$$invalidate){let handlesTrailingIconClick;let isFocused;let isReadonly;let isError;let isDisabled;const[Types,validateType]=typeValidator("Input type",["text","number","password","email","date","datetime-local","month","range","search","tel","time","url","week"]);const[AutoCapitalize,validateAutoCapitalize]=typeValidator("Input auto capitalize",["on","off","none","sentences","words","characters"]);let{type="text"}=$$props;let{name=""}=$$props;let{value=""}=$$props;let{autocapitalize="off"}=$$props;let{placeholder=""}=$$props;let{leadingicon=null}=$$props;let{trailingicon=null}=$$props;let{variant="goa"}=$$props;let{disabled="false"}=$$props;let{handletrailingiconclick="false"}=$$props;let{focused="false"}=$$props;let{readonly="false"}=$$props;let{error="false"}=$$props;let{testid=""}=$$props;let{width="30ch"}=$$props;let{arialabel=null}=$$props;let{min=""}=$$props;let{max=""}=$$props;let{step=1}=$$props;let{prefix=""}=$$props;let{suffix=""}=$$props;let{debounce=0}=$$props;let{maxlength=null}=$$props;let{mt=null}=$$props;let{mr=null}=$$props;let{mb=null}=$$props;let{ml=null}=$$props;let inputEl;let _rootEL;let _leadingContentSlot=false;let _trailingContentSlot=false;let _debounceId=null;function onKeyUp(e){const input=e.target;if(!input)return;if(isReadonly)return;if(_debounceId!=null){clearTimeout(_debounceId);}_debounceId=setTimeout(()=>{input.dispatchEvent(new CustomEvent("_change",{composed:true,bubbles:false,cancelable:true,detail:{name,value:input.value}}));},debounce);$$invalidate(0,value=input.value);}function onFocus(e){const input=e.target;input.dispatchEvent(new CustomEvent("_focus",{composed:true,detail:{name,value:input.value}}));}function onBlur(e){const input=e.target;input.dispatchEvent(new CustomEvent("_blur",{composed:true,detail:{name,value:input.value}}));}onMount(function(){return _call(tick,function(){validateType(type);validateAutoCapitalize(autocapitalize);if(prefix!=""||suffix!=""){console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");}const leadingContentSlot=_rootEL.querySelector("slot[name=leadingContent]");if(leadingContentSlot&&leadingContentSlot.assignedNodes().length>0){$$invalidate(23,_leadingContentSlot=true);}const trailingContentSlot=_rootEL.querySelector("slot[name=trailingContent]");if(trailingContentSlot&&trailingContentSlot.assignedNodes().length>0){$$invalidate(24,_trailingContentSlot=true);}});});function input_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{inputEl=$$value;$$invalidate(21,inputEl);});}function div3_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootEL=$$value;$$invalidate(22,_rootEL);});}$$self.$$set=$$props=>{if('type'in $$props)$$invalidate(1,type=$$props.type);if('name'in $$props)$$invalidate(2,name=$$props.name);if('value'in $$props)$$invalidate(0,value=$$props.value);if('autocapitalize'in $$props)$$invalidate(3,autocapitalize=$$props.autocapitalize);if('placeholder'in $$props)$$invalidate(4,placeholder=$$props.placeholder);if('leadingicon'in $$props)$$invalidate(5,leadingicon=$$props.leadingicon);if('trailingicon'in $$props)$$invalidate(6,trailingicon=$$props.trailingicon);if('variant'in $$props)$$invalidate(7,variant=$$props.variant);if('disabled'in $$props)$$invalidate(32,disabled=$$props.disabled);if('handletrailingiconclick'in $$props)$$invalidate(33,handletrailingiconclick=$$props.handletrailingiconclick);if('focused'in $$props)$$invalidate(34,focused=$$props.focused);if('readonly'in $$props)$$invalidate(35,readonly=$$props.readonly);if('error'in $$props)$$invalidate(36,error=$$props.error);if('testid'in $$props)$$invalidate(8,testid=$$props.testid);if('width'in $$props)$$invalidate(9,width=$$props.width);if('arialabel'in $$props)$$invalidate(10,arialabel=$$props.arialabel);if('min'in $$props)$$invalidate(11,min=$$props.min);if('max'in $$props)$$invalidate(12,max=$$props.max);if('step'in $$props)$$invalidate(13,step=$$props.step);if('prefix'in $$props)$$invalidate(14,prefix=$$props.prefix);if('suffix'in $$props)$$invalidate(15,suffix=$$props.suffix);if('debounce'in $$props)$$invalidate(37,debounce=$$props.debounce);if('maxlength'in $$props)$$invalidate(16,maxlength=$$props.maxlength);if('mt'in $$props)$$invalidate(17,mt=$$props.mt);if('mr'in $$props)$$invalidate(18,mr=$$props.mr);if('mb'in $$props)$$invalidate(19,mb=$$props.mb);if('ml'in $$props)$$invalidate(20,ml=$$props.ml);};$$self.$$.update=()=>{if($$self.$$.dirty[1]&/*handletrailingiconclick*/4){$$invalidate(28,handlesTrailingIconClick=toBoolean(handletrailingiconclick));}if($$self.$$.dirty[1]&/*focused*/8){$$invalidate(38,isFocused=toBoolean(focused));}if($$self.$$.dirty[1]&/*readonly*/16){$$invalidate(25,isReadonly=toBoolean(readonly));}if($$self.$$.dirty[1]&/*error*/32){$$invalidate(27,isError=toBoolean(error));}if($$self.$$.dirty[1]&/*disabled*/2){$$invalidate(26,isDisabled=toBoolean(disabled));}if($$self.$$.dirty[0]&/*inputEl*/2097152|$$self.$$.dirty[1]&/*isFocused*/128){if(isFocused&&inputEl){setTimeout(()=>inputEl.focus(),1);}}if($$self.$$.dirty[0]&/*inputEl, type*/2097154){if(inputEl&&type==="search"){inputEl.addEventListener("search",e=>{onKeyUp(e);});}}};return [value,type,name,autocapitalize,placeholder,leadingicon,trailingicon,variant,testid,width,arialabel,min,max,step,prefix,suffix,maxlength,mt,mr,mb,ml,inputEl,_rootEL,_leadingContentSlot,_trailingContentSlot,isReadonly,isDisabled,isError,handlesTrailingIconClick,onKeyUp,onFocus,onBlur,disabled,handletrailingiconclick,focused,readonly,error,debounce,isFocused,input_binding,div3_binding];}class Input extends SvelteElement{constructor(options){super();const style=document.createElement('style');style.textContent=`:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus-within:not(.goa-input-leading-content):not(.goa-input-trailing-content){box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.75rem}.goa-input-trailing-icon{margin-right:var(--goa-space-s)}.goa-input-trailing-icon-button{margin-right:var(--goa-space-xs)}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs) var(--goa-space-s);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:not(.goa-input-leading-content):not(.goa-input-trailing-content),.error:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.error .input-leading-content,.error .input-leading-content:hover,.error .input-trailing-content,.error .input-trailing-content:hover{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error .input-leading-content:focus,.error .input-trailing-content:focus,.error .input-leading-content:active,.error .input-trailing-content:active{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.input-leading-content:hover,.input-trailing-content:hover{box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);outline:var(--goa-border-width-s) solid var(--goa-color-interactive-hover)}.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);outline:var(--goa-border-width-s) solid var(--goa-color-greyscale-700)}.error .input-trailing-content,.input-trailing-content:hover,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m)}.error .input-leading-content,.input-leading-content:hover,.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within{border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.input-leading-content.input-trailing-content,.input-leading-content.input-trailing-content:hover,.input-leading-content.input-trailing-content:active,.input-leading-content.input-trailing-content:focus,.input-leading-content.input-trailing-content:focus-within{border-radius:0}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
|
|
267
267
|
center center no-repeat}`;this.shadowRoot.appendChild(style);init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$s,create_fragment$v,safe_not_equal,{type:1,name:2,value:0,autocapitalize:3,placeholder:4,leadingicon:5,trailingicon:6,variant:7,disabled:32,handletrailingiconclick:33,focused:34,readonly:35,error:36,testid:8,width:9,arialabel:10,min:11,max:12,step:13,prefix:14,suffix:15,debounce:37,maxlength:16,mt:17,mr:18,mb:19,ml:20},null,[-1,-1]);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["type","name","value","autocapitalize","placeholder","leadingicon","trailingicon","variant","disabled","handletrailingiconclick","focused","readonly","error","testid","width","arialabel","min","max","step","prefix","suffix","debounce","maxlength","mt","mr","mb","ml"];}get type(){return this.$$.ctx[1];}set type(type){this.$$set({type});flush();}get name(){return this.$$.ctx[2];}set name(name){this.$$set({name});flush();}get value(){return this.$$.ctx[0];}set value(value){this.$$set({value});flush();}get autocapitalize(){return this.$$.ctx[3];}set autocapitalize(autocapitalize){this.$$set({autocapitalize});flush();}get placeholder(){return this.$$.ctx[4];}set placeholder(placeholder){this.$$set({placeholder});flush();}get leadingicon(){return this.$$.ctx[5];}set leadingicon(leadingicon){this.$$set({leadingicon});flush();}get trailingicon(){return this.$$.ctx[6];}set trailingicon(trailingicon){this.$$set({trailingicon});flush();}get variant(){return this.$$.ctx[7];}set variant(variant){this.$$set({variant});flush();}get disabled(){return this.$$.ctx[32];}set disabled(disabled){this.$$set({disabled});flush();}get handletrailingiconclick(){return this.$$.ctx[33];}set handletrailingiconclick(handletrailingiconclick){this.$$set({handletrailingiconclick});flush();}get focused(){return this.$$.ctx[34];}set focused(focused){this.$$set({focused});flush();}get readonly(){return this.$$.ctx[35];}set readonly(readonly){this.$$set({readonly});flush();}get error(){return this.$$.ctx[36];}set error(error){this.$$set({error});flush();}get testid(){return this.$$.ctx[8];}set testid(testid){this.$$set({testid});flush();}get width(){return this.$$.ctx[9];}set width(width){this.$$set({width});flush();}get arialabel(){return this.$$.ctx[10];}set arialabel(arialabel){this.$$set({arialabel});flush();}get min(){return this.$$.ctx[11];}set min(min){this.$$set({min});flush();}get max(){return this.$$.ctx[12];}set max(max){this.$$set({max});flush();}get step(){return this.$$.ctx[13];}set step(step){this.$$set({step});flush();}get prefix(){return this.$$.ctx[14];}set prefix(prefix){this.$$set({prefix});flush();}get suffix(){return this.$$.ctx[15];}set suffix(suffix){this.$$set({suffix});flush();}get debounce(){return this.$$.ctx[37];}set debounce(debounce){this.$$set({debounce});flush();}get maxlength(){return this.$$.ctx[16];}set maxlength(maxlength){this.$$set({maxlength});flush();}get mt(){return this.$$.ctx[17];}set mt(mt){this.$$set({mt});flush();}get mr(){return this.$$.ctx[18];}set mr(mr){this.$$set({mr});flush();}get mb(){return this.$$.ctx[19];}set mb(mb){this.$$set({mb});flush();}get ml(){return this.$$.ctx[20];}set ml(ml){this.$$set({ml});flush();}}customElements.define("goa-input",Input);/* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.59.2 */function create_if_block_3$7(ctx){let div;return {c(){div=element("div");div.innerHTML=`An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;attr(div,"data-testid","type");attr(div,"class","site-text");},m(target,anchor){insert(target,div,anchor);},d(detaching){if(detaching)detach(div);}};}// (31:4) {#if ["alpha", "beta"].includes(type)}
|
|
268
268
|
function create_if_block_1$8(ctx){let div0;let t0_value=capitalize(/*type*/ctx[0])+"";let t0;let div0_class_value;let t1;let div1;let t2;let a;let t4;let if_block=/*feedbackurl*/ctx[2]&&create_if_block_2$7(ctx);return {c(){div0=element("div");t0=text(t0_value);t1=space();div1=element("div");t2=text("This is a new ");a=element("a");a.textContent="Alberta Government";t4=text(" service\n ");if(if_block)if_block.c();attr(div0,"data-testid","type");attr(div0,"class",div0_class_value="service-type service-type--"+/*type*/ctx[0].toLowerCase());attr(a,"href","https://www.alberta.ca/index.aspx");attr(div1,"data-testid","site-text");attr(div1,"class","site-text");},m(target,anchor){insert(target,div0,anchor);append(div0,t0);insert(target,t1,anchor);insert(target,div1,anchor);append(div1,t2);append(div1,a);append(div1,t4);if(if_block)if_block.m(div1,null);},p(ctx,dirty){if(dirty&/*type*/1&&t0_value!==(t0_value=capitalize(/*type*/ctx[0])+""))set_data(t0,t0_value);if(dirty&/*type*/1&&div0_class_value!==(div0_class_value="service-type service-type--"+/*type*/ctx[0].toLowerCase())){attr(div0,"class",div0_class_value);}if(/*feedbackurl*/ctx[2]){if(if_block){if_block.p(ctx,dirty);}else {if_block=create_if_block_2$7(ctx);if_block.c();if_block.m(div1,null);}}else if(if_block){if_block.d(1);if_block=null;}},d(detaching){if(detaching)detach(div0);if(detaching)detach(t1);if(detaching)detach(div1);if(if_block)if_block.d();}};}// (40:8) {#if feedbackurl}
|
|
269
269
|
function create_if_block_2$7(ctx){let span;let t0;let a;let t1;return {c(){span=element("span");t0=text("— help us improve it by giving ");a=element("a");t1=text("feedback");attr(a,"href",/*feedbackurl*/ctx[2]);attr(span,"data-testid","feedback");},m(target,anchor){insert(target,span,anchor);append(span,t0);append(span,a);append(a,t1);},p(ctx,dirty){if(dirty&/*feedbackurl*/4){attr(a,"href",/*feedbackurl*/ctx[2]);}},d(detaching){if(detaching)detach(span);}};}// (46:4) {#if version}
|