@abgov/react-components 4.0.0-alpha.162 → 4.0.0-alpha.163
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/index.d.ts +1 -0
- package/lib/form-step/form-step.d.ts +3 -3
- package/lib/form-stepper/form-stepper.d.ts +1 -1
- package/package.json +1 -1
- package/react-components.esm.js +15 -15
- package/react-components.umd.js +15 -15
package/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export * from "./lib/file-upload-card/file-upload-card";
|
|
|
6
6
|
export * from "./lib/file-upload-input/file-upload-input";
|
|
7
7
|
export type { GoAIconType } from "./lib/icon/icon";
|
|
8
8
|
export type { GoABadgeType } from "./lib/badge/badge";
|
|
9
|
+
export type { GoAFormStepStatusType } from "./lib/form-step/form-step";
|
|
9
10
|
export * from "./lib/accordion/accordion";
|
|
10
11
|
export * from "./lib/form-step/form-step";
|
|
11
12
|
export * from "./lib/form-stepper/form-stepper";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare type
|
|
2
|
+
export declare type GoAFormStepStatusType = "complete" | "incomplete";
|
|
3
3
|
interface WCProps {
|
|
4
4
|
text: string;
|
|
5
|
-
status?:
|
|
5
|
+
status?: GoAFormStepStatusType;
|
|
6
6
|
}
|
|
7
7
|
declare global {
|
|
8
8
|
namespace JSX {
|
|
@@ -13,7 +13,7 @@ declare global {
|
|
|
13
13
|
}
|
|
14
14
|
export interface FormStepProps {
|
|
15
15
|
text: string;
|
|
16
|
-
status?:
|
|
16
|
+
status?: GoAFormStepStatusType;
|
|
17
17
|
}
|
|
18
18
|
export declare function GoAFormStep(props: FormStepProps): JSX.Element;
|
|
19
19
|
export default GoAFormStep;
|
package/package.json
CHANGED
package/react-components.esm.js
CHANGED
|
@@ -392,13 +392,13 @@ _expandedNavItems=item&&!_expandedNavItems.includes(item)?[..._expandedNavItems,
|
|
|
392
392
|
*/function isExpanded(item){if(item.items&&item.items.length>0){return _expandedNavItems.includes(item)||hasSubItemSelected(item);}return false;}/**
|
|
393
393
|
* Accessibility when press enter to select the item
|
|
394
394
|
*/function handleKeyDown(event,item){if(event.key==="Enter"){toggle(item);}}const click_handler=item=>toggle(item);const keydown_handler=(item,event)=>handleKeyDown(event,item);function div_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootElement=$$value;$$invalidate(1,_rootElement);});}$$self.$$set=$$props=>{if('level'in $$props)$$invalidate(0,level=$$props.level);if('navitems'in $$props)$$invalidate(7,navitems=$$props.navitems);};$$self.$$.update=()=>{if($$self.$$.dirty&/*_rootElement, level, navitems*/131){{if(_rootElement){$$invalidate(2,_items=level===0?[...getItems()]:[...navitems]);}}}};return [level,_rootElement,_items,toggle,calculateMarginLeft,isExpanded,handleKeyDown,navitems,click_handler,keydown_handler,div_binding];}class Sidebar$1 extends SvelteElement{constructor(options){super();this.shadowRoot.innerHTML=`<style>div.first-level{margin-top:var(--goa-space-m)}:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);color:var(--goa-color-text-default)}ul{list-style:none;padding:0;margin:0}li{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0.625rem var(--goa-space-s) 1vh var(--goa-space-xl);gap:var(--goa-line-height-05);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.label{font:var(--goa-typography-body-m);display:flex;align-items:center}li.active .label{font:var(--goa-typography-heading-s)}li:hover{background:#CEDFEE}li.expanded{background:#CEDFEE}li.active{background:var(--goa-color-info-background)}li:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}li.sub-level{padding:0.625rem var(--goa-space-s) 1vh var(--goa-space-m)}li.active.sub-level{border-left:4px solid var(--goa-color-interactive-disabled)}li.sub-level:not(.active):not(:hover){border-left:4px solid var(--goa-color-greyscale-100)}li.sub-level:hover{background:var(--goa-color-info-background);border-left:4px solid var(--goa-color-greyscale-200)}</style>`;init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$7,create_fragment$8,safe_not_equal,{level:0,navitems:7},null);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["level","navitems"];}get level(){return this.$$.ctx[0];}set level(level){this.$$set({level});flush();}get navitems(){return this.$$.ctx[7];}set navitems(navitems){this.$$set({navitems});flush();}}customElements.define("goax-sidebar",Sidebar$1);/* libs/web-components/src/components/_experimental/sidebar/SidebarItem.svelte generated by Svelte v3.51.0 */function create_fragment$7(ctx){return {c(){this.c=noop;},m:noop,p:noop,i:noop,o:noop,d:noop};}class SidebarItem extends SvelteElement{constructor(options){super();init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},null,create_fragment$7,safe_not_equal,{},null);if(options){if(options.target){insert(options.target,this,options.anchor);}}}}customElements.define("goax-sidebar-item",SidebarItem);/* libs/web-components/src/components/form-stepper/FormStepper.svelte generated by Svelte v3.51.0 */function create_if_block$4(ctx){let progress0;let t;let progress1;return {c(){progress0=element("progress");t=space();progress1=element("progress");attr(progress0,"class","horizontal");progress0.value=/*_progress*/ctx[11];attr(progress0,"max","100");attr(progress1,"class","vertical");progress1.value=/*_progress*/ctx[11];attr(progress1,"max","100");},m(target,anchor){insert(target,progress0,anchor);insert(target,t,anchor);insert(target,progress1,anchor);},p(ctx,dirty){if(dirty&/*_progress*/2048){progress0.value=/*_progress*/ctx[11];}if(dirty&/*_progress*/2048){progress1.value=/*_progress*/ctx[11];}},d(detaching){if(detaching)detach(progress0);if(detaching)detach(t);if(detaching)detach(progress1);}};}function create_fragment$6(ctx){let section;let div1;let t;let div0;let div1_style_value;let if_block=/*_steps*/ctx[4].length>0&&/*_showProgressBars*/ctx[10]&&create_if_block$4(ctx);return {c(){section=element("section");div1=element("div");if(if_block)if_block.c();t=space();div0=element("div");div0.innerHTML=`<goa-grid minchildwidth="1px"><slot></slot></goa-grid>`;this.c=noop;attr(div0,"class","slots");attr(div1,"class","form-stepper");attr(div1,"style",div1_style_value=`
|
|
395
|
-
${calculateMargin(/*mt*/ctx[0],/*mr*/ctx[1],/*mb*/ctx[2],/*ml*/ctx[3])};
|
|
395
|
+
${calculateMargin(/*mt*/ctx[0],/*mr*/ctx[1],/*mb*/ctx[2],/*ml*/ctx[3])};
|
|
396
396
|
--progress: ${/*_progress*/ctx[11]}%;
|
|
397
397
|
--step-width: ${/*_stepWidth*/ctx[7]}px;
|
|
398
398
|
--step-height: ${/*_stepHeight*/ctx[8]}px;
|
|
399
399
|
--height: ${/*_progressHeight*/ctx[9]}px;
|
|
400
400
|
`);attr(section,"role","list");},m(target,anchor){insert(target,section,anchor);append(section,div1);if(if_block)if_block.m(div1,null);append(div1,t);append(div1,div0);/*div0_binding*/ctx[15](div0);/*div1_binding*/ctx[16](div1);},p(ctx,[dirty]){if(/*_steps*/ctx[4].length>0&&/*_showProgressBars*/ctx[10]){if(if_block){if_block.p(ctx,dirty);}else {if_block=create_if_block$4(ctx);if_block.c();if_block.m(div1,t);}}else if(if_block){if_block.d(1);if_block=null;}if(dirty&/*mt, mr, mb, ml, _progress, _stepWidth, _stepHeight, _progressHeight*/2959&&div1_style_value!==(div1_style_value=`
|
|
401
|
-
${calculateMargin(/*mt*/ctx[0],/*mr*/ctx[1],/*mb*/ctx[2],/*ml*/ctx[3])};
|
|
401
|
+
${calculateMargin(/*mt*/ctx[0],/*mr*/ctx[1],/*mb*/ctx[2],/*ml*/ctx[3])};
|
|
402
402
|
--progress: ${/*_progress*/ctx[11]}%;
|
|
403
403
|
--step-width: ${/*_stepWidth*/ctx[7]}px;
|
|
404
404
|
--step-height: ${/*_stepHeight*/ctx[8]}px;
|
|
@@ -417,33 +417,33 @@ let _maxProgressStep=1;// controls the progress bars value
|
|
|
417
417
|
let _showProgressBars=false;// delays the showing of the progress bars to prevent it from
|
|
418
418
|
onMount(async()=>{await tick();// children steps
|
|
419
419
|
const slot=_rootEl.querySelector("slot");if(slot){$$invalidate(4,_steps=slot.assignedElements());}else {// for unit tests only
|
|
420
|
-
$$invalidate(4,_steps=[..._rootEl.querySelector("goa-grid").children]);}//
|
|
421
|
-
if(step<=0){$$invalidate(12,step=1);setTimeout(()=>{dispatch(step);},1);$$invalidate(13,_maxAllowedStep=_steps.length);}// set step a11y label
|
|
420
|
+
$$invalidate(4,_steps=[..._rootEl.querySelector("goa-grid").children]);}// set step a11y label
|
|
422
421
|
_steps.forEach((_step,index)=>{const s=_step;s.setAttribute("arialabel",`Step ${index+1} of ${_steps.length}`);s.setAttribute("childindex",`${index+1}`);});// handle click events from progress items
|
|
423
422
|
_rootEl.addEventListener("_click",e=>{$$invalidate(12,step=e.detail);dispatch(step);});setCurrentStepStatus(step);calcStepDims();setTimeout(()=>{$$invalidate(10,_showProgressBars=true);},10);// add listener to recalculate the step widths
|
|
424
423
|
window.addEventListener('resize',calcStepDims);window.addEventListener('orientationchange',calcStepDims);return ()=>{window.removeEventListener('resize',calcStepDims);window.removeEventListener('orientationchange',calcStepDims);};});function dispatch(step){_rootEl.dispatchEvent(new CustomEvent("_change",{composed:true,bubbles:true,detail:{step}}));}function setCurrentStepStatus(step){_steps.forEach((stepEl,index)=>{stepEl.setAttribute("current",index===step-1?"true":"false");});}function calcStepDims(){// timeout required, without it the _steps elements width was not yet updated
|
|
425
|
-
setTimeout(()=>{$$invalidate(7,_stepWidth=_steps.length>0&&_steps[0].offsetWidth);$$invalidate(8,_stepHeight=_steps.length>0&&_steps[0].offsetHeight);$$invalidate(9,_progressHeight=_gridEl===null||_gridEl===void 0?void 0:_gridEl.offsetHeight);},1);}function div0_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_gridEl=$$value;$$invalidate(6,_gridEl);});}function div1_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootEl=$$value;$$invalidate(5,_rootEl);});}$$self.$$set=$$props=>{if('step'in $$props)$$invalidate(12,step=$$props.step);if('mt'in $$props)$$invalidate(0,mt=$$props.mt);if('mr'in $$props)$$invalidate(1,mr=$$props.mr);if('mb'in $$props)$$invalidate(2,mb=$$props.mb);if('ml'in $$props)$$invalidate(3,ml=$$props.ml);};$$self.$$.update=()=>{if($$self.$$.dirty&/*_steps, step, _maxProgressStep, _maxAllowedStep*/28688){{if(_steps.length){
|
|
424
|
+
setTimeout(()=>{$$invalidate(7,_stepWidth=_steps.length>0&&_steps[0].offsetWidth);$$invalidate(8,_stepHeight=_steps.length>0&&_steps[0].offsetHeight);$$invalidate(9,_progressHeight=_gridEl===null||_gridEl===void 0?void 0:_gridEl.offsetHeight);},1);}function div0_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_gridEl=$$value;$$invalidate(6,_gridEl);});}function div1_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootEl=$$value;$$invalidate(5,_rootEl);});}$$self.$$set=$$props=>{if('step'in $$props)$$invalidate(12,step=$$props.step);if('mt'in $$props)$$invalidate(0,mt=$$props.mt);if('mr'in $$props)$$invalidate(1,mr=$$props.mr);if('mb'in $$props)$$invalidate(2,mb=$$props.mb);if('ml'in $$props)$$invalidate(3,ml=$$props.ml);};$$self.$$.update=()=>{if($$self.$$.dirty&/*_steps, step, _maxProgressStep, _maxAllowedStep*/28688){{if(_steps.length){// allow access to all steps if not step property is provided
|
|
425
|
+
if(step<=0){$$invalidate(12,step=1);setTimeout(()=>{dispatch(step);},1);$$invalidate(13,_maxAllowedStep=_steps.length);}if(step>_maxProgressStep)$$invalidate(14,_maxProgressStep=step);if(step>_maxAllowedStep)$$invalidate(13,_maxAllowedStep=step);_steps.forEach((stepEl,index)=>{stepEl.setAttribute("enabled",index>_maxAllowedStep-1?"false":"true");});}}}if($$self.$$.dirty&/*_maxProgressStep, _steps*/16400){// being temporarily visible with an unwanted offset
|
|
426
426
|
// ========
|
|
427
427
|
// Reactive
|
|
428
428
|
// ========
|
|
429
429
|
// handles the 1-based step value and the number of line segments is one less
|
|
430
430
|
// than the number of steps
|
|
431
|
-
$$invalidate(11,_progress=(_maxProgressStep-1)/(_steps.length-1)*100);}if($$self.$$.dirty&/*step*/4096){setCurrentStepStatus(step);}};return [mt,mr,mb,ml,_steps,_rootEl,_gridEl,_stepWidth,_stepHeight,_progressHeight,_showProgressBars,_progress,step,_maxAllowedStep,_maxProgressStep,div0_binding,div1_binding];}class FormStepper extends SvelteElement{constructor(options){super();this.shadowRoot.innerHTML=`<style>.form-stepper{position:relative}.slots{position:relative;inset:0;z-index:2}progress{position:absolute;z-index:1;-webkit-appearance:none;appearance:none;height:4px;border:none;background:var(--goa-color-greyscale-200);pointer-events:none}progress.horizontal{display:block;top:calc(1.5rem + (2.5rem / 2) - 2px);left:calc(var(--step-width) / 2);width:calc(100% - var(--step-width))}progress.vertical{display:none;width:calc(var(--height) - var(--step-height));transform:rotate(90deg)
|
|
431
|
+
$$invalidate(11,_progress=(_maxProgressStep-1)/(_steps.length-1)*100);}if($$self.$$.dirty&/*step*/4096){setCurrentStepStatus(step);}};return [mt,mr,mb,ml,_steps,_rootEl,_gridEl,_stepWidth,_stepHeight,_progressHeight,_showProgressBars,_progress,step,_maxAllowedStep,_maxProgressStep,div0_binding,div1_binding];}class FormStepper extends SvelteElement{constructor(options){super();this.shadowRoot.innerHTML=`<style>.form-stepper{position:relative}.slots{position:relative;inset:0;z-index:2}progress{position:absolute;z-index:1;-webkit-appearance:none;appearance:none;height:4px;border:none;background:var(--goa-color-greyscale-200);pointer-events:none}progress.horizontal{display:block;top:calc(1.5rem + (2.5rem / 2) - 2px);left:calc(var(--step-width) / 2);width:calc(100% - var(--step-width))}progress.vertical{display:none;width:calc(var(--height) - var(--step-height));transform:rotate(90deg)
|
|
432
432
|
translate(
|
|
433
|
-
calc(50% + 1.25rem + 1.75rem),
|
|
433
|
+
calc(50% + 1.25rem + 1.75rem),
|
|
434
434
|
calc((var(--height) - var(--step-height)) / 2 - 1.25rem - 1.5rem)
|
|
435
|
-
)}progress::-webkit-progress-value{background:var(--goa-color-interactive-default)}progress::-webkit-progress-bar{background:var(--goa-color-greyscale-200)}progress::-moz-progress-bar{background:var(--goa-color-interactive-default)}@media(max-width: 639px){progress.horizontal{display:none}progress.vertical{display:inline-block}.form-stepper{display:inline-block}}</style>`;init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$6,create_fragment$6,safe_not_equal,{step:12,mt:0,mr:1,mb:2,ml:3},null);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["step","mt","mr","mb","ml"];}get step(){return this.$$.ctx[12];}set step(step){this.$$set({step});flush();}get mt(){return this.$$.ctx[0];}set mt(mt){this.$$set({mt});flush();}get mr(){return this.$$.ctx[1];}set mr(mr){this.$$set({mr});flush();}get mb(){return this.$$.ctx[2];}set mb(mb){this.$$set({mb});flush();}get ml(){return this.$$.ctx[3];}set ml(ml){this.$$set({ml});flush();}}customElements.define("goa-form-stepper",FormStepper);/* libs/web-components/src/components/form-step/FormStep.svelte generated by Svelte v3.51.0 */function create_else_block$2(ctx){let div;let t;return {c(){div=element("div");t=text(/*childindex*/ctx[1]);attr(div,"data-testid","child-index");attr(div,"class","step-number");},m(target,anchor){insert(target,div,anchor);append(div,t);},p(ctx,dirty){if(dirty&/*childindex*/2)set_data(t,/*childindex*/ctx[1]);},d(detaching){if(detaching)detach(div);}};}// (
|
|
436
|
-
function create_if_block_3$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","remove");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (
|
|
437
|
-
function create_if_block_2$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","checkmark");set_custom_element_data(goa_icon,"inverted","");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (
|
|
438
|
-
function create_if_block_1$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","pencil");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (
|
|
439
|
-
function create_if_block$3(ctx){let div;return {c(){div=element("div");div.textContent="Partially complete";attr(div,"class","subtext");attr(div,"data-testid","subtext");},m(target,anchor){insert(target,div,anchor);},d(detaching){if(detaching)detach(div);}};}function create_fragment$5(ctx){let label;let input;let input_aria_disabled_value;let t0;let div0;let t1;let div2;let div1;let t2;let t3;let label_aria_disabled_value;let label_aria_current_value;let label_aria_label_value;function select_block_type(ctx,dirty){if(/*_isCurrent*/ctx[7])return create_if_block_1$2;if(/*status*/ctx[3]==="complete")return create_if_block_2$2;if(/*status*/ctx[3]==="incomplete")return create_if_block_3$2;return create_else_block$2;}let current_block_type=select_block_type(ctx);let if_block0=current_block_type(ctx);let if_block1=/*status*/ctx[3]==="incomplete"&&create_if_block$3();return {c(){label=element("label");input=element("input");t0=space();div0=element("div");if_block0.c();t1=space();div2=element("div");div1=element("div");t2=text(/*text*/ctx[0]);t3=space();if(if_block1)if_block1.c();this.c=noop;attr(input,"id",/*text*/ctx[0]);attr(input,"type","checkbox");input.checked=/*_isCurrent*/ctx[7];attr(input,"aria-disabled",input_aria_disabled_value=!/*_isEnabled*/ctx[6]);attr(div0,"data-testid","status");attr(div0,"class","status");attr(div1,"class","text");attr(div1,"data-testid","text");attr(div2,"class","details");attr(label,"id",/*arialabel*/ctx[2]);attr(label,"role","listitem");attr(label,"tabindex","-1");attr(label,"for",/*text*/ctx[0]);attr(label,"data-status",/*status*/ctx[3]);attr(label,"aria-disabled",label_aria_disabled_value=!/*_isEnabled*/ctx[6]?"true":"false");attr(label,"aria-current",label_aria_current_value=/*_isCurrent*/ctx[7]?"step":"false");attr(label,"aria-label",label_aria_label_value=`${/*arialabel*/ctx[2]} ${/*text*/ctx[0]} ${/*status*/ctx[3]||""}`);},m(target,anchor){insert(target,label,anchor);append(label,input);/*input_binding*/ctx[10](input);append(label,t0);append(label,div0);if_block0.m(div0,null);append(label,t1);append(label,div2);append(div2,div1);append(div1,t2);append(div2,t3);if(if_block1)if_block1.m(div2,null);/*label_binding*/ctx[11](label);},p(ctx,[dirty]){if(dirty&/*text*/1){attr(input,"id",/*text*/ctx[0]);}if(dirty&/*_isCurrent*/128){input.checked=/*_isCurrent*/ctx[7];}if(dirty&/*_isEnabled*/64&&input_aria_disabled_value!==(input_aria_disabled_value=!/*_isEnabled*/ctx[6])){attr(input,"aria-disabled",input_aria_disabled_value);}if(current_block_type===(current_block_type=select_block_type(ctx))&&if_block0){if_block0.p(ctx,dirty);}else {if_block0.d(1);if_block0=current_block_type(ctx);if(if_block0){if_block0.c();if_block0.m(div0,null);}}if(dirty&/*text*/1)set_data(t2,/*text*/ctx[0]);if(/*status*/ctx[3]==="incomplete"){if(if_block1);else {if_block1=create_if_block$3();if_block1.c();if_block1.m(div2,null);}}else if(if_block1){if_block1.d(1);if_block1=null;}if(dirty&/*arialabel*/4){attr(label,"id",/*arialabel*/ctx[2]);}if(dirty&/*text*/1){attr(label,"for",/*text*/ctx[0]);}if(dirty&/*status*/8){attr(label,"data-status",/*status*/ctx[3]);}if(dirty&/*_isEnabled*/64&&label_aria_disabled_value!==(label_aria_disabled_value=!/*_isEnabled*/ctx[6]?"true":"false")){attr(label,"aria-disabled",label_aria_disabled_value);}if(dirty&/*_isCurrent*/128&&label_aria_current_value!==(label_aria_current_value=/*_isCurrent*/ctx[7]?"step":"false")){attr(label,"aria-current",label_aria_current_value);}if(dirty&/*arialabel, text, status*/13&&label_aria_label_value!==(label_aria_label_value=`${/*arialabel*/ctx[2]} ${/*text*/ctx[0]} ${/*status*/ctx[3]||""}`)){attr(label,"aria-label",label_aria_label_value);}},i:noop,o:noop,d(detaching){if(detaching)detach(label);/*input_binding*/ctx[10](null);if_block0.d();if(if_block1)if_block1.d();/*label_binding*/ctx[11](null);}};}function instance$5($$self,$$props,$$invalidate){let _isCurrent;let _isEnabled;let{text}=$$props;let{current="false"}=$$props;let{enabled="false"}=$$props;let{childindex=""}=$$props;let{arialabel=""}=$$props;let{status}=$$props;// =======
|
|
435
|
+
)}progress::-webkit-progress-value{background:var(--goa-color-interactive-default)}progress::-webkit-progress-bar{background:var(--goa-color-greyscale-200)}progress::-moz-progress-bar{background:var(--goa-color-interactive-default)}@media(max-width: 639px){progress.horizontal{display:none}progress.vertical{display:inline-block}.form-stepper{display:inline-block}}</style>`;init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$6,create_fragment$6,safe_not_equal,{step:12,mt:0,mr:1,mb:2,ml:3},null);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["step","mt","mr","mb","ml"];}get step(){return this.$$.ctx[12];}set step(step){this.$$set({step});flush();}get mt(){return this.$$.ctx[0];}set mt(mt){this.$$set({mt});flush();}get mr(){return this.$$.ctx[1];}set mr(mr){this.$$set({mr});flush();}get mb(){return this.$$.ctx[2];}set mb(mb){this.$$set({mb});flush();}get ml(){return this.$$.ctx[3];}set ml(ml){this.$$set({ml});flush();}}customElements.define("goa-form-stepper",FormStepper);/* libs/web-components/src/components/form-step/FormStep.svelte generated by Svelte v3.51.0 */function create_else_block$2(ctx){let div;let t;return {c(){div=element("div");t=text(/*childindex*/ctx[1]);attr(div,"data-testid","child-index");attr(div,"class","step-number");},m(target,anchor){insert(target,div,anchor);append(div,t);},p(ctx,dirty){if(dirty&/*childindex*/2)set_data(t,/*childindex*/ctx[1]);},d(detaching){if(detaching)detach(div);}};}// (161:38)
|
|
436
|
+
function create_if_block_3$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","remove");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (159:36)
|
|
437
|
+
function create_if_block_2$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","checkmark");set_custom_element_data(goa_icon,"inverted","");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (157:4) {#if _isCurrent}
|
|
438
|
+
function create_if_block_1$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","pencil");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (169:4) {#if status === "incomplete"}
|
|
439
|
+
function create_if_block$3(ctx){let div;return {c(){div=element("div");div.textContent="Partially complete";attr(div,"class","subtext");attr(div,"data-testid","subtext");},m(target,anchor){insert(target,div,anchor);},d(detaching){if(detaching)detach(div);}};}function create_fragment$5(ctx){let label;let input;let input_aria_disabled_value;let t0;let div0;let t1;let div2;let div1;let t2;let t3;let label_aria_disabled_value;let label_aria_current_value;let label_aria_label_value;function select_block_type(ctx,dirty){if(/*_isCurrent*/ctx[7])return create_if_block_1$2;if(/*status*/ctx[3]==="complete")return create_if_block_2$2;if(/*status*/ctx[3]==="incomplete")return create_if_block_3$2;return create_else_block$2;}let current_block_type=select_block_type(ctx);let if_block0=current_block_type(ctx);let if_block1=/*status*/ctx[3]==="incomplete"&&create_if_block$3();return {c(){label=element("label");input=element("input");t0=space();div0=element("div");if_block0.c();t1=space();div2=element("div");div1=element("div");t2=text(/*text*/ctx[0]);t3=space();if(if_block1)if_block1.c();this.c=noop;attr(input,"id",/*text*/ctx[0]);attr(input,"type","checkbox");input.checked=/*_isCurrent*/ctx[7];attr(input,"aria-disabled",input_aria_disabled_value=!/*_isEnabled*/ctx[6]);attr(div0,"data-testid","status");attr(div0,"class","status");attr(div1,"class","text");attr(div1,"data-testid","text");attr(div2,"class","details");attr(label,"id",/*arialabel*/ctx[2]);attr(label,"role","listitem");attr(label,"tabindex","-1");attr(label,"for",/*text*/ctx[0]);attr(label,"data-status",/*status*/ctx[3]);attr(label,"aria-disabled",label_aria_disabled_value=!/*_isEnabled*/ctx[6]?"true":"false");attr(label,"aria-current",label_aria_current_value=/*_isCurrent*/ctx[7]?"step":"false");attr(label,"aria-label",label_aria_label_value=`${/*arialabel*/ctx[2]} ${/*text*/ctx[0]} ${/*status*/ctx[3]||""}`);},m(target,anchor){insert(target,label,anchor);append(label,input);/*input_binding*/ctx[10](input);append(label,t0);append(label,div0);if_block0.m(div0,null);append(label,t1);append(label,div2);append(div2,div1);append(div1,t2);append(div2,t3);if(if_block1)if_block1.m(div2,null);/*label_binding*/ctx[11](label);},p(ctx,[dirty]){if(dirty&/*text*/1){attr(input,"id",/*text*/ctx[0]);}if(dirty&/*_isCurrent*/128){input.checked=/*_isCurrent*/ctx[7];}if(dirty&/*_isEnabled*/64&&input_aria_disabled_value!==(input_aria_disabled_value=!/*_isEnabled*/ctx[6])){attr(input,"aria-disabled",input_aria_disabled_value);}if(current_block_type===(current_block_type=select_block_type(ctx))&&if_block0){if_block0.p(ctx,dirty);}else {if_block0.d(1);if_block0=current_block_type(ctx);if(if_block0){if_block0.c();if_block0.m(div0,null);}}if(dirty&/*text*/1)set_data(t2,/*text*/ctx[0]);if(/*status*/ctx[3]==="incomplete"){if(if_block1);else {if_block1=create_if_block$3();if_block1.c();if_block1.m(div2,null);}}else if(if_block1){if_block1.d(1);if_block1=null;}if(dirty&/*arialabel*/4){attr(label,"id",/*arialabel*/ctx[2]);}if(dirty&/*text*/1){attr(label,"for",/*text*/ctx[0]);}if(dirty&/*status*/8){attr(label,"data-status",/*status*/ctx[3]);}if(dirty&/*_isEnabled*/64&&label_aria_disabled_value!==(label_aria_disabled_value=!/*_isEnabled*/ctx[6]?"true":"false")){attr(label,"aria-disabled",label_aria_disabled_value);}if(dirty&/*_isCurrent*/128&&label_aria_current_value!==(label_aria_current_value=/*_isCurrent*/ctx[7]?"step":"false")){attr(label,"aria-current",label_aria_current_value);}if(dirty&/*arialabel, text, status*/13&&label_aria_label_value!==(label_aria_label_value=`${/*arialabel*/ctx[2]} ${/*text*/ctx[0]} ${/*status*/ctx[3]||""}`)){attr(label,"aria-label",label_aria_label_value);}},i:noop,o:noop,d(detaching){if(detaching)detach(label);/*input_binding*/ctx[10](null);if_block0.d();if(if_block1)if_block1.d();/*label_binding*/ctx[11](null);}};}function instance$5($$self,$$props,$$invalidate){let _isCurrent;let _isEnabled;const[StatusTypes,validateStatus]=typeValidator("Form Step status",["incomplete","complete"],true);let{text}=$$props;let{current="false"}=$$props;let{enabled="false"}=$$props;let{childindex=""}=$$props;let{arialabel=""}=$$props;let{status}=$$props;// =======
|
|
440
440
|
// Private
|
|
441
441
|
// =======
|
|
442
|
-
let _stepEl;let _checkbox;onMount(()=>{
|
|
442
|
+
let _stepEl;let _checkbox;onMount(()=>{validateStatus(status);// event binding
|
|
443
443
|
_stepEl.addEventListener("click",()=>{if(!_isEnabled)return;$$invalidate(5,_checkbox.checked=!_checkbox.checked,_checkbox);_stepEl.dispatchEvent(new CustomEvent("_click",{composed:true,bubbles:true,detail:+childindex}));});});function input_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_checkbox=$$value;$$invalidate(5,_checkbox);});}function label_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_stepEl=$$value;$$invalidate(4,_stepEl);});}$$self.$$set=$$props=>{if('text'in $$props)$$invalidate(0,text=$$props.text);if('current'in $$props)$$invalidate(8,current=$$props.current);if('enabled'in $$props)$$invalidate(9,enabled=$$props.enabled);if('childindex'in $$props)$$invalidate(1,childindex=$$props.childindex);if('arialabel'in $$props)$$invalidate(2,arialabel=$$props.arialabel);if('status'in $$props)$$invalidate(3,status=$$props.status);};$$self.$$.update=()=>{if($$self.$$.dirty&/*current*/256){// ========
|
|
444
444
|
// Reactive
|
|
445
445
|
// ========
|
|
446
|
-
$$invalidate(7,_isCurrent=toBoolean(current));}if($$self.$$.dirty&/*enabled*/
|
|
446
|
+
$$invalidate(7,_isCurrent=toBoolean(current));}if($$self.$$.dirty&/*enabled, status*/520){$$invalidate(6,_isEnabled=toBoolean(enabled)||status==="complete");}};return [text,childindex,arialabel,status,_stepEl,_checkbox,_isEnabled,_isCurrent,current,enabled,input_binding,label_binding];}class FormStep extends SvelteElement{constructor(options){super();this.shadowRoot.innerHTML=`<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}.status>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
|
|
447
447
|
}[data-status=complete] .status{background:var(--goa-color-interactive-default)}[aria-current="step"][data-status=complete] .status{background:var(--goa-color-greyscale-white)}.step-number{margin-bottom:var(--font-valign-fix);font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-secondary)}[role="listitem"]:not(
|
|
448
448
|
[data-status=complete],
|
|
449
449
|
[data-status=incomplete],
|
|
@@ -643,7 +643,7 @@ function GoAFormStepper({
|
|
|
643
643
|
const {
|
|
644
644
|
step
|
|
645
645
|
} = e.detail;
|
|
646
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(step);
|
|
646
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(+step);
|
|
647
647
|
};
|
|
648
648
|
|
|
649
649
|
current.addEventListener("_change", changeListener);
|
package/react-components.umd.js
CHANGED
|
@@ -394,13 +394,13 @@
|
|
|
394
394
|
*/function isExpanded(item){if(item.items&&item.items.length>0){return _expandedNavItems.includes(item)||hasSubItemSelected(item);}return false;}/**
|
|
395
395
|
* Accessibility when press enter to select the item
|
|
396
396
|
*/function handleKeyDown(event,item){if(event.key==="Enter"){toggle(item);}}const click_handler=item=>toggle(item);const keydown_handler=(item,event)=>handleKeyDown(event,item);function div_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootElement=$$value;$$invalidate(1,_rootElement);});}$$self.$$set=$$props=>{if('level'in $$props)$$invalidate(0,level=$$props.level);if('navitems'in $$props)$$invalidate(7,navitems=$$props.navitems);};$$self.$$.update=()=>{if($$self.$$.dirty&/*_rootElement, level, navitems*/131){{if(_rootElement){$$invalidate(2,_items=level===0?[...getItems()]:[...navitems]);}}}};return [level,_rootElement,_items,toggle,calculateMarginLeft,isExpanded,handleKeyDown,navitems,click_handler,keydown_handler,div_binding];}class Sidebar$1 extends SvelteElement{constructor(options){super();this.shadowRoot.innerHTML=`<style>div.first-level{margin-top:var(--goa-space-m)}:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);color:var(--goa-color-text-default)}ul{list-style:none;padding:0;margin:0}li{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0.625rem var(--goa-space-s) 1vh var(--goa-space-xl);gap:var(--goa-line-height-05);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.label{font:var(--goa-typography-body-m);display:flex;align-items:center}li.active .label{font:var(--goa-typography-heading-s)}li:hover{background:#CEDFEE}li.expanded{background:#CEDFEE}li.active{background:var(--goa-color-info-background)}li:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}li.sub-level{padding:0.625rem var(--goa-space-s) 1vh var(--goa-space-m)}li.active.sub-level{border-left:4px solid var(--goa-color-interactive-disabled)}li.sub-level:not(.active):not(:hover){border-left:4px solid var(--goa-color-greyscale-100)}li.sub-level:hover{background:var(--goa-color-info-background);border-left:4px solid var(--goa-color-greyscale-200)}</style>`;init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$7,create_fragment$8,safe_not_equal,{level:0,navitems:7},null);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["level","navitems"];}get level(){return this.$$.ctx[0];}set level(level){this.$$set({level});flush();}get navitems(){return this.$$.ctx[7];}set navitems(navitems){this.$$set({navitems});flush();}}customElements.define("goax-sidebar",Sidebar$1);/* libs/web-components/src/components/_experimental/sidebar/SidebarItem.svelte generated by Svelte v3.51.0 */function create_fragment$7(ctx){return {c(){this.c=noop;},m:noop,p:noop,i:noop,o:noop,d:noop};}class SidebarItem extends SvelteElement{constructor(options){super();init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},null,create_fragment$7,safe_not_equal,{},null);if(options){if(options.target){insert(options.target,this,options.anchor);}}}}customElements.define("goax-sidebar-item",SidebarItem);/* libs/web-components/src/components/form-stepper/FormStepper.svelte generated by Svelte v3.51.0 */function create_if_block$4(ctx){let progress0;let t;let progress1;return {c(){progress0=element("progress");t=space();progress1=element("progress");attr(progress0,"class","horizontal");progress0.value=/*_progress*/ctx[11];attr(progress0,"max","100");attr(progress1,"class","vertical");progress1.value=/*_progress*/ctx[11];attr(progress1,"max","100");},m(target,anchor){insert(target,progress0,anchor);insert(target,t,anchor);insert(target,progress1,anchor);},p(ctx,dirty){if(dirty&/*_progress*/2048){progress0.value=/*_progress*/ctx[11];}if(dirty&/*_progress*/2048){progress1.value=/*_progress*/ctx[11];}},d(detaching){if(detaching)detach(progress0);if(detaching)detach(t);if(detaching)detach(progress1);}};}function create_fragment$6(ctx){let section;let div1;let t;let div0;let div1_style_value;let if_block=/*_steps*/ctx[4].length>0&&/*_showProgressBars*/ctx[10]&&create_if_block$4(ctx);return {c(){section=element("section");div1=element("div");if(if_block)if_block.c();t=space();div0=element("div");div0.innerHTML=`<goa-grid minchildwidth="1px"><slot></slot></goa-grid>`;this.c=noop;attr(div0,"class","slots");attr(div1,"class","form-stepper");attr(div1,"style",div1_style_value=`
|
|
397
|
-
${calculateMargin(/*mt*/ctx[0],/*mr*/ctx[1],/*mb*/ctx[2],/*ml*/ctx[3])};
|
|
397
|
+
${calculateMargin(/*mt*/ctx[0],/*mr*/ctx[1],/*mb*/ctx[2],/*ml*/ctx[3])};
|
|
398
398
|
--progress: ${/*_progress*/ctx[11]}%;
|
|
399
399
|
--step-width: ${/*_stepWidth*/ctx[7]}px;
|
|
400
400
|
--step-height: ${/*_stepHeight*/ctx[8]}px;
|
|
401
401
|
--height: ${/*_progressHeight*/ctx[9]}px;
|
|
402
402
|
`);attr(section,"role","list");},m(target,anchor){insert(target,section,anchor);append(section,div1);if(if_block)if_block.m(div1,null);append(div1,t);append(div1,div0);/*div0_binding*/ctx[15](div0);/*div1_binding*/ctx[16](div1);},p(ctx,[dirty]){if(/*_steps*/ctx[4].length>0&&/*_showProgressBars*/ctx[10]){if(if_block){if_block.p(ctx,dirty);}else {if_block=create_if_block$4(ctx);if_block.c();if_block.m(div1,t);}}else if(if_block){if_block.d(1);if_block=null;}if(dirty&/*mt, mr, mb, ml, _progress, _stepWidth, _stepHeight, _progressHeight*/2959&&div1_style_value!==(div1_style_value=`
|
|
403
|
-
${calculateMargin(/*mt*/ctx[0],/*mr*/ctx[1],/*mb*/ctx[2],/*ml*/ctx[3])};
|
|
403
|
+
${calculateMargin(/*mt*/ctx[0],/*mr*/ctx[1],/*mb*/ctx[2],/*ml*/ctx[3])};
|
|
404
404
|
--progress: ${/*_progress*/ctx[11]}%;
|
|
405
405
|
--step-width: ${/*_stepWidth*/ctx[7]}px;
|
|
406
406
|
--step-height: ${/*_stepHeight*/ctx[8]}px;
|
|
@@ -419,33 +419,33 @@
|
|
|
419
419
|
let _showProgressBars=false;// delays the showing of the progress bars to prevent it from
|
|
420
420
|
onMount(function(){return _call(tick,function(){// children steps
|
|
421
421
|
const slot=_rootEl.querySelector("slot");if(slot){$$invalidate(4,_steps=slot.assignedElements());}else {// for unit tests only
|
|
422
|
-
$$invalidate(4,_steps=[..._rootEl.querySelector("goa-grid").children]);}//
|
|
423
|
-
if(step<=0){$$invalidate(12,step=1);setTimeout(()=>{dispatch(step);},1);$$invalidate(13,_maxAllowedStep=_steps.length);}// set step a11y label
|
|
422
|
+
$$invalidate(4,_steps=[..._rootEl.querySelector("goa-grid").children]);}// set step a11y label
|
|
424
423
|
_steps.forEach((_step,index)=>{const s=_step;s.setAttribute("arialabel",`Step ${index+1} of ${_steps.length}`);s.setAttribute("childindex",`${index+1}`);});// handle click events from progress items
|
|
425
424
|
_rootEl.addEventListener("_click",e=>{$$invalidate(12,step=e.detail);dispatch(step);});setCurrentStepStatus(step);calcStepDims();setTimeout(()=>{$$invalidate(10,_showProgressBars=true);},10);// add listener to recalculate the step widths
|
|
426
425
|
window.addEventListener('resize',calcStepDims);window.addEventListener('orientationchange',calcStepDims);return ()=>{window.removeEventListener('resize',calcStepDims);window.removeEventListener('orientationchange',calcStepDims);};});});function dispatch(step){_rootEl.dispatchEvent(new CustomEvent("_change",{composed:true,bubbles:true,detail:{step}}));}function setCurrentStepStatus(step){_steps.forEach((stepEl,index)=>{stepEl.setAttribute("current",index===step-1?"true":"false");});}function calcStepDims(){// timeout required, without it the _steps elements width was not yet updated
|
|
427
|
-
setTimeout(()=>{$$invalidate(7,_stepWidth=_steps.length>0&&_steps[0].offsetWidth);$$invalidate(8,_stepHeight=_steps.length>0&&_steps[0].offsetHeight);$$invalidate(9,_progressHeight=_gridEl===null||_gridEl===void 0?void 0:_gridEl.offsetHeight);},1);}function div0_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_gridEl=$$value;$$invalidate(6,_gridEl);});}function div1_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootEl=$$value;$$invalidate(5,_rootEl);});}$$self.$$set=$$props=>{if('step'in $$props)$$invalidate(12,step=$$props.step);if('mt'in $$props)$$invalidate(0,mt=$$props.mt);if('mr'in $$props)$$invalidate(1,mr=$$props.mr);if('mb'in $$props)$$invalidate(2,mb=$$props.mb);if('ml'in $$props)$$invalidate(3,ml=$$props.ml);};$$self.$$.update=()=>{if($$self.$$.dirty&/*_steps, step, _maxProgressStep, _maxAllowedStep*/28688){{if(_steps.length){
|
|
426
|
+
setTimeout(()=>{$$invalidate(7,_stepWidth=_steps.length>0&&_steps[0].offsetWidth);$$invalidate(8,_stepHeight=_steps.length>0&&_steps[0].offsetHeight);$$invalidate(9,_progressHeight=_gridEl===null||_gridEl===void 0?void 0:_gridEl.offsetHeight);},1);}function div0_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_gridEl=$$value;$$invalidate(6,_gridEl);});}function div1_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_rootEl=$$value;$$invalidate(5,_rootEl);});}$$self.$$set=$$props=>{if('step'in $$props)$$invalidate(12,step=$$props.step);if('mt'in $$props)$$invalidate(0,mt=$$props.mt);if('mr'in $$props)$$invalidate(1,mr=$$props.mr);if('mb'in $$props)$$invalidate(2,mb=$$props.mb);if('ml'in $$props)$$invalidate(3,ml=$$props.ml);};$$self.$$.update=()=>{if($$self.$$.dirty&/*_steps, step, _maxProgressStep, _maxAllowedStep*/28688){{if(_steps.length){// allow access to all steps if not step property is provided
|
|
427
|
+
if(step<=0){$$invalidate(12,step=1);setTimeout(()=>{dispatch(step);},1);$$invalidate(13,_maxAllowedStep=_steps.length);}if(step>_maxProgressStep)$$invalidate(14,_maxProgressStep=step);if(step>_maxAllowedStep)$$invalidate(13,_maxAllowedStep=step);_steps.forEach((stepEl,index)=>{stepEl.setAttribute("enabled",index>_maxAllowedStep-1?"false":"true");});}}}if($$self.$$.dirty&/*_maxProgressStep, _steps*/16400){// being temporarily visible with an unwanted offset
|
|
428
428
|
// ========
|
|
429
429
|
// Reactive
|
|
430
430
|
// ========
|
|
431
431
|
// handles the 1-based step value and the number of line segments is one less
|
|
432
432
|
// than the number of steps
|
|
433
|
-
$$invalidate(11,_progress=(_maxProgressStep-1)/(_steps.length-1)*100);}if($$self.$$.dirty&/*step*/4096){setCurrentStepStatus(step);}};return [mt,mr,mb,ml,_steps,_rootEl,_gridEl,_stepWidth,_stepHeight,_progressHeight,_showProgressBars,_progress,step,_maxAllowedStep,_maxProgressStep,div0_binding,div1_binding];}class FormStepper extends SvelteElement{constructor(options){super();this.shadowRoot.innerHTML=`<style>.form-stepper{position:relative}.slots{position:relative;inset:0;z-index:2}progress{position:absolute;z-index:1;-webkit-appearance:none;appearance:none;height:4px;border:none;background:var(--goa-color-greyscale-200);pointer-events:none}progress.horizontal{display:block;top:calc(1.5rem + (2.5rem / 2) - 2px);left:calc(var(--step-width) / 2);width:calc(100% - var(--step-width))}progress.vertical{display:none;width:calc(var(--height) - var(--step-height));transform:rotate(90deg)
|
|
433
|
+
$$invalidate(11,_progress=(_maxProgressStep-1)/(_steps.length-1)*100);}if($$self.$$.dirty&/*step*/4096){setCurrentStepStatus(step);}};return [mt,mr,mb,ml,_steps,_rootEl,_gridEl,_stepWidth,_stepHeight,_progressHeight,_showProgressBars,_progress,step,_maxAllowedStep,_maxProgressStep,div0_binding,div1_binding];}class FormStepper extends SvelteElement{constructor(options){super();this.shadowRoot.innerHTML=`<style>.form-stepper{position:relative}.slots{position:relative;inset:0;z-index:2}progress{position:absolute;z-index:1;-webkit-appearance:none;appearance:none;height:4px;border:none;background:var(--goa-color-greyscale-200);pointer-events:none}progress.horizontal{display:block;top:calc(1.5rem + (2.5rem / 2) - 2px);left:calc(var(--step-width) / 2);width:calc(100% - var(--step-width))}progress.vertical{display:none;width:calc(var(--height) - var(--step-height));transform:rotate(90deg)
|
|
434
434
|
translate(
|
|
435
|
-
calc(50% + 1.25rem + 1.75rem),
|
|
435
|
+
calc(50% + 1.25rem + 1.75rem),
|
|
436
436
|
calc((var(--height) - var(--step-height)) / 2 - 1.25rem - 1.5rem)
|
|
437
|
-
)}progress::-webkit-progress-value{background:var(--goa-color-interactive-default)}progress::-webkit-progress-bar{background:var(--goa-color-greyscale-200)}progress::-moz-progress-bar{background:var(--goa-color-interactive-default)}@media(max-width: 639px){progress.horizontal{display:none}progress.vertical{display:inline-block}.form-stepper{display:inline-block}}</style>`;init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$6,create_fragment$6,safe_not_equal,{step:12,mt:0,mr:1,mb:2,ml:3},null);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["step","mt","mr","mb","ml"];}get step(){return this.$$.ctx[12];}set step(step){this.$$set({step});flush();}get mt(){return this.$$.ctx[0];}set mt(mt){this.$$set({mt});flush();}get mr(){return this.$$.ctx[1];}set mr(mr){this.$$set({mr});flush();}get mb(){return this.$$.ctx[2];}set mb(mb){this.$$set({mb});flush();}get ml(){return this.$$.ctx[3];}set ml(ml){this.$$set({ml});flush();}}customElements.define("goa-form-stepper",FormStepper);/* libs/web-components/src/components/form-step/FormStep.svelte generated by Svelte v3.51.0 */function create_else_block$2(ctx){let div;let t;return {c(){div=element("div");t=text(/*childindex*/ctx[1]);attr(div,"data-testid","child-index");attr(div,"class","step-number");},m(target,anchor){insert(target,div,anchor);append(div,t);},p(ctx,dirty){if(dirty&/*childindex*/2)set_data(t,/*childindex*/ctx[1]);},d(detaching){if(detaching)detach(div);}};}// (
|
|
438
|
-
function create_if_block_3$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","remove");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (
|
|
439
|
-
function create_if_block_2$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","checkmark");set_custom_element_data(goa_icon,"inverted","");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (
|
|
440
|
-
function create_if_block_1$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","pencil");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (
|
|
441
|
-
function create_if_block$3(ctx){let div;return {c(){div=element("div");div.textContent="Partially complete";attr(div,"class","subtext");attr(div,"data-testid","subtext");},m(target,anchor){insert(target,div,anchor);},d(detaching){if(detaching)detach(div);}};}function create_fragment$5(ctx){let label;let input;let input_aria_disabled_value;let t0;let div0;let t1;let div2;let div1;let t2;let t3;let label_aria_disabled_value;let label_aria_current_value;let label_aria_label_value;function select_block_type(ctx,dirty){if(/*_isCurrent*/ctx[7])return create_if_block_1$2;if(/*status*/ctx[3]==="complete")return create_if_block_2$2;if(/*status*/ctx[3]==="incomplete")return create_if_block_3$2;return create_else_block$2;}let current_block_type=select_block_type(ctx);let if_block0=current_block_type(ctx);let if_block1=/*status*/ctx[3]==="incomplete"&&create_if_block$3();return {c(){label=element("label");input=element("input");t0=space();div0=element("div");if_block0.c();t1=space();div2=element("div");div1=element("div");t2=text(/*text*/ctx[0]);t3=space();if(if_block1)if_block1.c();this.c=noop;attr(input,"id",/*text*/ctx[0]);attr(input,"type","checkbox");input.checked=/*_isCurrent*/ctx[7];attr(input,"aria-disabled",input_aria_disabled_value=!/*_isEnabled*/ctx[6]);attr(div0,"data-testid","status");attr(div0,"class","status");attr(div1,"class","text");attr(div1,"data-testid","text");attr(div2,"class","details");attr(label,"id",/*arialabel*/ctx[2]);attr(label,"role","listitem");attr(label,"tabindex","-1");attr(label,"for",/*text*/ctx[0]);attr(label,"data-status",/*status*/ctx[3]);attr(label,"aria-disabled",label_aria_disabled_value=!/*_isEnabled*/ctx[6]?"true":"false");attr(label,"aria-current",label_aria_current_value=/*_isCurrent*/ctx[7]?"step":"false");attr(label,"aria-label",label_aria_label_value=`${/*arialabel*/ctx[2]} ${/*text*/ctx[0]} ${/*status*/ctx[3]||""}`);},m(target,anchor){insert(target,label,anchor);append(label,input);/*input_binding*/ctx[10](input);append(label,t0);append(label,div0);if_block0.m(div0,null);append(label,t1);append(label,div2);append(div2,div1);append(div1,t2);append(div2,t3);if(if_block1)if_block1.m(div2,null);/*label_binding*/ctx[11](label);},p(ctx,[dirty]){if(dirty&/*text*/1){attr(input,"id",/*text*/ctx[0]);}if(dirty&/*_isCurrent*/128){input.checked=/*_isCurrent*/ctx[7];}if(dirty&/*_isEnabled*/64&&input_aria_disabled_value!==(input_aria_disabled_value=!/*_isEnabled*/ctx[6])){attr(input,"aria-disabled",input_aria_disabled_value);}if(current_block_type===(current_block_type=select_block_type(ctx))&&if_block0){if_block0.p(ctx,dirty);}else {if_block0.d(1);if_block0=current_block_type(ctx);if(if_block0){if_block0.c();if_block0.m(div0,null);}}if(dirty&/*text*/1)set_data(t2,/*text*/ctx[0]);if(/*status*/ctx[3]==="incomplete"){if(if_block1);else {if_block1=create_if_block$3();if_block1.c();if_block1.m(div2,null);}}else if(if_block1){if_block1.d(1);if_block1=null;}if(dirty&/*arialabel*/4){attr(label,"id",/*arialabel*/ctx[2]);}if(dirty&/*text*/1){attr(label,"for",/*text*/ctx[0]);}if(dirty&/*status*/8){attr(label,"data-status",/*status*/ctx[3]);}if(dirty&/*_isEnabled*/64&&label_aria_disabled_value!==(label_aria_disabled_value=!/*_isEnabled*/ctx[6]?"true":"false")){attr(label,"aria-disabled",label_aria_disabled_value);}if(dirty&/*_isCurrent*/128&&label_aria_current_value!==(label_aria_current_value=/*_isCurrent*/ctx[7]?"step":"false")){attr(label,"aria-current",label_aria_current_value);}if(dirty&/*arialabel, text, status*/13&&label_aria_label_value!==(label_aria_label_value=`${/*arialabel*/ctx[2]} ${/*text*/ctx[0]} ${/*status*/ctx[3]||""}`)){attr(label,"aria-label",label_aria_label_value);}},i:noop,o:noop,d(detaching){if(detaching)detach(label);/*input_binding*/ctx[10](null);if_block0.d();if(if_block1)if_block1.d();/*label_binding*/ctx[11](null);}};}function instance$5($$self,$$props,$$invalidate){let _isCurrent;let _isEnabled;let{text}=$$props;let{current="false"}=$$props;let{enabled="false"}=$$props;let{childindex=""}=$$props;let{arialabel=""}=$$props;let{status}=$$props;// =======
|
|
437
|
+
)}progress::-webkit-progress-value{background:var(--goa-color-interactive-default)}progress::-webkit-progress-bar{background:var(--goa-color-greyscale-200)}progress::-moz-progress-bar{background:var(--goa-color-interactive-default)}@media(max-width: 639px){progress.horizontal{display:none}progress.vertical{display:inline-block}.form-stepper{display:inline-block}}</style>`;init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$6,create_fragment$6,safe_not_equal,{step:12,mt:0,mr:1,mb:2,ml:3},null);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["step","mt","mr","mb","ml"];}get step(){return this.$$.ctx[12];}set step(step){this.$$set({step});flush();}get mt(){return this.$$.ctx[0];}set mt(mt){this.$$set({mt});flush();}get mr(){return this.$$.ctx[1];}set mr(mr){this.$$set({mr});flush();}get mb(){return this.$$.ctx[2];}set mb(mb){this.$$set({mb});flush();}get ml(){return this.$$.ctx[3];}set ml(ml){this.$$set({ml});flush();}}customElements.define("goa-form-stepper",FormStepper);/* libs/web-components/src/components/form-step/FormStep.svelte generated by Svelte v3.51.0 */function create_else_block$2(ctx){let div;let t;return {c(){div=element("div");t=text(/*childindex*/ctx[1]);attr(div,"data-testid","child-index");attr(div,"class","step-number");},m(target,anchor){insert(target,div,anchor);append(div,t);},p(ctx,dirty){if(dirty&/*childindex*/2)set_data(t,/*childindex*/ctx[1]);},d(detaching){if(detaching)detach(div);}};}// (161:38)
|
|
438
|
+
function create_if_block_3$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","remove");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (159:36)
|
|
439
|
+
function create_if_block_2$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","checkmark");set_custom_element_data(goa_icon,"inverted","");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (157:4) {#if _isCurrent}
|
|
440
|
+
function create_if_block_1$2(ctx){let goa_icon;return {c(){goa_icon=element("goa-icon");set_custom_element_data(goa_icon,"type","pencil");},m(target,anchor){insert(target,goa_icon,anchor);},p:noop,d(detaching){if(detaching)detach(goa_icon);}};}// (169:4) {#if status === "incomplete"}
|
|
441
|
+
function create_if_block$3(ctx){let div;return {c(){div=element("div");div.textContent="Partially complete";attr(div,"class","subtext");attr(div,"data-testid","subtext");},m(target,anchor){insert(target,div,anchor);},d(detaching){if(detaching)detach(div);}};}function create_fragment$5(ctx){let label;let input;let input_aria_disabled_value;let t0;let div0;let t1;let div2;let div1;let t2;let t3;let label_aria_disabled_value;let label_aria_current_value;let label_aria_label_value;function select_block_type(ctx,dirty){if(/*_isCurrent*/ctx[7])return create_if_block_1$2;if(/*status*/ctx[3]==="complete")return create_if_block_2$2;if(/*status*/ctx[3]==="incomplete")return create_if_block_3$2;return create_else_block$2;}let current_block_type=select_block_type(ctx);let if_block0=current_block_type(ctx);let if_block1=/*status*/ctx[3]==="incomplete"&&create_if_block$3();return {c(){label=element("label");input=element("input");t0=space();div0=element("div");if_block0.c();t1=space();div2=element("div");div1=element("div");t2=text(/*text*/ctx[0]);t3=space();if(if_block1)if_block1.c();this.c=noop;attr(input,"id",/*text*/ctx[0]);attr(input,"type","checkbox");input.checked=/*_isCurrent*/ctx[7];attr(input,"aria-disabled",input_aria_disabled_value=!/*_isEnabled*/ctx[6]);attr(div0,"data-testid","status");attr(div0,"class","status");attr(div1,"class","text");attr(div1,"data-testid","text");attr(div2,"class","details");attr(label,"id",/*arialabel*/ctx[2]);attr(label,"role","listitem");attr(label,"tabindex","-1");attr(label,"for",/*text*/ctx[0]);attr(label,"data-status",/*status*/ctx[3]);attr(label,"aria-disabled",label_aria_disabled_value=!/*_isEnabled*/ctx[6]?"true":"false");attr(label,"aria-current",label_aria_current_value=/*_isCurrent*/ctx[7]?"step":"false");attr(label,"aria-label",label_aria_label_value=`${/*arialabel*/ctx[2]} ${/*text*/ctx[0]} ${/*status*/ctx[3]||""}`);},m(target,anchor){insert(target,label,anchor);append(label,input);/*input_binding*/ctx[10](input);append(label,t0);append(label,div0);if_block0.m(div0,null);append(label,t1);append(label,div2);append(div2,div1);append(div1,t2);append(div2,t3);if(if_block1)if_block1.m(div2,null);/*label_binding*/ctx[11](label);},p(ctx,[dirty]){if(dirty&/*text*/1){attr(input,"id",/*text*/ctx[0]);}if(dirty&/*_isCurrent*/128){input.checked=/*_isCurrent*/ctx[7];}if(dirty&/*_isEnabled*/64&&input_aria_disabled_value!==(input_aria_disabled_value=!/*_isEnabled*/ctx[6])){attr(input,"aria-disabled",input_aria_disabled_value);}if(current_block_type===(current_block_type=select_block_type(ctx))&&if_block0){if_block0.p(ctx,dirty);}else {if_block0.d(1);if_block0=current_block_type(ctx);if(if_block0){if_block0.c();if_block0.m(div0,null);}}if(dirty&/*text*/1)set_data(t2,/*text*/ctx[0]);if(/*status*/ctx[3]==="incomplete"){if(if_block1);else {if_block1=create_if_block$3();if_block1.c();if_block1.m(div2,null);}}else if(if_block1){if_block1.d(1);if_block1=null;}if(dirty&/*arialabel*/4){attr(label,"id",/*arialabel*/ctx[2]);}if(dirty&/*text*/1){attr(label,"for",/*text*/ctx[0]);}if(dirty&/*status*/8){attr(label,"data-status",/*status*/ctx[3]);}if(dirty&/*_isEnabled*/64&&label_aria_disabled_value!==(label_aria_disabled_value=!/*_isEnabled*/ctx[6]?"true":"false")){attr(label,"aria-disabled",label_aria_disabled_value);}if(dirty&/*_isCurrent*/128&&label_aria_current_value!==(label_aria_current_value=/*_isCurrent*/ctx[7]?"step":"false")){attr(label,"aria-current",label_aria_current_value);}if(dirty&/*arialabel, text, status*/13&&label_aria_label_value!==(label_aria_label_value=`${/*arialabel*/ctx[2]} ${/*text*/ctx[0]} ${/*status*/ctx[3]||""}`)){attr(label,"aria-label",label_aria_label_value);}},i:noop,o:noop,d(detaching){if(detaching)detach(label);/*input_binding*/ctx[10](null);if_block0.d();if(if_block1)if_block1.d();/*label_binding*/ctx[11](null);}};}function instance$5($$self,$$props,$$invalidate){let _isCurrent;let _isEnabled;const[StatusTypes,validateStatus]=typeValidator("Form Step status",["incomplete","complete"],true);let{text}=$$props;let{current="false"}=$$props;let{enabled="false"}=$$props;let{childindex=""}=$$props;let{arialabel=""}=$$props;let{status}=$$props;// =======
|
|
442
442
|
// Private
|
|
443
443
|
// =======
|
|
444
|
-
let _stepEl;let _checkbox;onMount(()=>{
|
|
444
|
+
let _stepEl;let _checkbox;onMount(()=>{validateStatus(status);// event binding
|
|
445
445
|
_stepEl.addEventListener("click",()=>{if(!_isEnabled)return;$$invalidate(5,_checkbox.checked=!_checkbox.checked,_checkbox);_stepEl.dispatchEvent(new CustomEvent("_click",{composed:true,bubbles:true,detail:+childindex}));});});function input_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_checkbox=$$value;$$invalidate(5,_checkbox);});}function label_binding($$value){binding_callbacks[$$value?'unshift':'push'](()=>{_stepEl=$$value;$$invalidate(4,_stepEl);});}$$self.$$set=$$props=>{if('text'in $$props)$$invalidate(0,text=$$props.text);if('current'in $$props)$$invalidate(8,current=$$props.current);if('enabled'in $$props)$$invalidate(9,enabled=$$props.enabled);if('childindex'in $$props)$$invalidate(1,childindex=$$props.childindex);if('arialabel'in $$props)$$invalidate(2,arialabel=$$props.arialabel);if('status'in $$props)$$invalidate(3,status=$$props.status);};$$self.$$.update=()=>{if($$self.$$.dirty&/*current*/256){// ========
|
|
446
446
|
// Reactive
|
|
447
447
|
// ========
|
|
448
|
-
$$invalidate(7,_isCurrent=toBoolean(current));}if($$self.$$.dirty&/*enabled*/
|
|
448
|
+
$$invalidate(7,_isCurrent=toBoolean(current));}if($$self.$$.dirty&/*enabled, status*/520){$$invalidate(6,_isEnabled=toBoolean(enabled)||status==="complete");}};return [text,childindex,arialabel,status,_stepEl,_checkbox,_isEnabled,_isCurrent,current,enabled,input_binding,label_binding];}class FormStep extends SvelteElement{constructor(options){super();this.shadowRoot.innerHTML=`<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}.status>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
|
|
449
449
|
}[data-status=complete] .status{background:var(--goa-color-interactive-default)}[aria-current="step"][data-status=complete] .status{background:var(--goa-color-greyscale-white)}.step-number{margin-bottom:var(--font-valign-fix);font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-secondary)}[role="listitem"]:not(
|
|
450
450
|
[data-status=complete],
|
|
451
451
|
[data-status=incomplete],
|
|
@@ -681,7 +681,7 @@
|
|
|
681
681
|
|
|
682
682
|
var changeListener = function changeListener(e) {
|
|
683
683
|
var step = e.detail.step;
|
|
684
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(step);
|
|
684
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(+step);
|
|
685
685
|
};
|
|
686
686
|
|
|
687
687
|
current.addEventListener("_change", changeListener);
|