@abgov/web-components 1.0.0-alpha.137 → 1.0.0-alpha.138
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 +1 -1
- package/web-components.es.js +24 -4
- package/web-components.umd.js +1 -1
package/package.json
CHANGED
package/web-components.es.js
CHANGED
|
@@ -7584,6 +7584,7 @@ function create_fragment$h(ctx) {
|
|
|
7584
7584
|
set_style(div1, "background-size", "cover");
|
|
7585
7585
|
set_style(div1, "background-position", "center");
|
|
7586
7586
|
set_style(div1, "background-repeat", "no-repeat");
|
|
7587
|
+
set_style(div1, "min-height", /*minheight*/ ctx[2]);
|
|
7587
7588
|
},
|
|
7588
7589
|
m(target, anchor) {
|
|
7589
7590
|
insert(target, div1, anchor);
|
|
@@ -7601,6 +7602,10 @@ function create_fragment$h(ctx) {
|
|
|
7601
7602
|
if (dirty & /*backgroundurl*/ 2) {
|
|
7602
7603
|
set_style(div1, "background-image", "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url(" + /*backgroundurl*/ ctx[1] + ")");
|
|
7603
7604
|
}
|
|
7605
|
+
|
|
7606
|
+
if (dirty & /*minheight*/ 4) {
|
|
7607
|
+
set_style(div1, "min-height", /*minheight*/ ctx[2]);
|
|
7608
|
+
}
|
|
7604
7609
|
},
|
|
7605
7610
|
i: noop,
|
|
7606
7611
|
o: noop,
|
|
@@ -7613,19 +7618,21 @@ function create_fragment$h(ctx) {
|
|
|
7613
7618
|
function instance$f($$self, $$props, $$invalidate) {
|
|
7614
7619
|
let { heading } = $$props;
|
|
7615
7620
|
let { backgroundurl } = $$props;
|
|
7621
|
+
let { minheight = "600px" } = $$props;
|
|
7616
7622
|
|
|
7617
7623
|
$$self.$$set = $$props => {
|
|
7618
7624
|
if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
|
|
7619
7625
|
if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
|
|
7626
|
+
if ('minheight' in $$props) $$invalidate(2, minheight = $$props.minheight);
|
|
7620
7627
|
};
|
|
7621
7628
|
|
|
7622
|
-
return [heading, backgroundurl];
|
|
7629
|
+
return [heading, backgroundurl, minheight];
|
|
7623
7630
|
}
|
|
7624
7631
|
|
|
7625
7632
|
class HeroBanner extends SvelteElement {
|
|
7626
7633
|
constructor(options) {
|
|
7627
7634
|
super();
|
|
7628
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;
|
|
7635
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
|
|
7629
7636
|
|
|
7630
7637
|
init(
|
|
7631
7638
|
this,
|
|
@@ -7637,7 +7644,11 @@ class HeroBanner extends SvelteElement {
|
|
|
7637
7644
|
instance$f,
|
|
7638
7645
|
create_fragment$h,
|
|
7639
7646
|
safe_not_equal,
|
|
7640
|
-
{
|
|
7647
|
+
{
|
|
7648
|
+
heading: 0,
|
|
7649
|
+
backgroundurl: 1,
|
|
7650
|
+
minheight: 2
|
|
7651
|
+
},
|
|
7641
7652
|
null
|
|
7642
7653
|
);
|
|
7643
7654
|
|
|
@@ -7654,7 +7665,7 @@ class HeroBanner extends SvelteElement {
|
|
|
7654
7665
|
}
|
|
7655
7666
|
|
|
7656
7667
|
static get observedAttributes() {
|
|
7657
|
-
return ["heading", "backgroundurl"];
|
|
7668
|
+
return ["heading", "backgroundurl", "minheight"];
|
|
7658
7669
|
}
|
|
7659
7670
|
|
|
7660
7671
|
get heading() {
|
|
@@ -7674,6 +7685,15 @@ class HeroBanner extends SvelteElement {
|
|
|
7674
7685
|
this.$$set({ backgroundurl });
|
|
7675
7686
|
flush();
|
|
7676
7687
|
}
|
|
7688
|
+
|
|
7689
|
+
get minheight() {
|
|
7690
|
+
return this.$$.ctx[2];
|
|
7691
|
+
}
|
|
7692
|
+
|
|
7693
|
+
set minheight(minheight) {
|
|
7694
|
+
this.$$set({ minheight });
|
|
7695
|
+
flush();
|
|
7696
|
+
}
|
|
7677
7697
|
}
|
|
7678
7698
|
|
|
7679
7699
|
customElements.define("goa-hero-banner", HeroBanner);
|
package/web-components.umd.js
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
${F(n[2],n[3],n[4],n[5])}
|
|
55
55
|
--min-child-width: ${n[1]||0};
|
|
56
56
|
gap: var(--goa-spacing-${n[0]})
|
|
57
|
-
`)&&d(e,"style",r)},i:_,o:_,d(n){n&&L(e)}}}function hn(i,e,t){let{gap:r="m"}=e,{minchildwidth:n=""}=e,{mt:l=null}=e,{mr:a=null}=e,{mb:o=null}=e,{ml:s=null}=e;return ee(()=>{yt("Grid",{minchildwidth:n})}),i.$$set=c=>{"gap"in c&&t(0,r=c.gap),"minchildwidth"in c&&t(1,n=c.minchildwidth),"mt"in c&&t(2,l=c.mt),"mr"in c&&t(3,a=c.mr),"mb"in c&&t(4,o=c.mb),"ml"in c&&t(5,s=c.ml)},[r,n,l,a,o,s]}class mn extends O{constructor(e){super();this.shadowRoot.innerHTML="<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>",P(this,{target:this.shadowRoot,props:I(this.attributes),customElement:!0},hn,fn,j,{gap:0,minchildwidth:1,mt:2,mr:3,mb:4,ml:5},null),e&&(e.target&&y(e.target,this,e.anchor),e.props&&(this.$set(e.props),h()))}static get observedAttributes(){return["gap","minchildwidth","mt","mr","mb","ml"]}get gap(){return this.$$.ctx[0]}set gap(e){this.$$set({gap:e}),h()}get minchildwidth(){return this.$$.ctx[1]}set minchildwidth(e){this.$$set({minchildwidth:e}),h()}get mt(){return this.$$.ctx[2]}set mt(e){this.$$set({mt:e}),h()}get mr(){return this.$$.ctx[3]}set mr(e){this.$$set({mr:e}),h()}get mb(){return this.$$.ctx[4]}set mb(e){this.$$set({mb:e}),h()}get ml(){return this.$$.ctx[5]}set ml(e){this.$$set({ml:e}),h()}}customElements.define("goa-grid",mn);function gn(i){let e,t,r,n,l,a,o,s;return{c(){e=b("div"),t=b("goa-page-block"),r=b("h1"),n=G(i[0]),l=A(),a=b("div"),a.innerHTML="<slot></slot>",o=A(),s=b("slot"),this.c=_,d(a,"class","goa-hero-banner-content"),d(a,"role","note"),d(s,"name","actions"),M(t,"width","full"),d(e,"class","goa-hero"),d(e,"data-testid","background"),Z(e,"background-image","linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url("+i[1]+")"),Z(e,"background-size","cover"),Z(e,"background-position","center"),Z(e,"background-repeat","no-repeat")},m(c,u){y(c,e,u),g(e,t),g(t,r),g(r,n),g(t,l),g(t,a),g(t,o),g(t,s)},p(c,[u]){u&1&&K(n,c[0]),u&2&&Z(e,"background-image","linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url("+c[1]+")")},i:_,o:_,d(c){c&&L(e)}}}function bn(i,e,t){let{heading:r}=e,{backgroundurl:n}=e;return i.$$set=
|
|
57
|
+
`)&&d(e,"style",r)},i:_,o:_,d(n){n&&L(e)}}}function hn(i,e,t){let{gap:r="m"}=e,{minchildwidth:n=""}=e,{mt:l=null}=e,{mr:a=null}=e,{mb:o=null}=e,{ml:s=null}=e;return ee(()=>{yt("Grid",{minchildwidth:n})}),i.$$set=c=>{"gap"in c&&t(0,r=c.gap),"minchildwidth"in c&&t(1,n=c.minchildwidth),"mt"in c&&t(2,l=c.mt),"mr"in c&&t(3,a=c.mr),"mb"in c&&t(4,o=c.mb),"ml"in c&&t(5,s=c.ml)},[r,n,l,a,o,s]}class mn extends O{constructor(e){super();this.shadowRoot.innerHTML="<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>",P(this,{target:this.shadowRoot,props:I(this.attributes),customElement:!0},hn,fn,j,{gap:0,minchildwidth:1,mt:2,mr:3,mb:4,ml:5},null),e&&(e.target&&y(e.target,this,e.anchor),e.props&&(this.$set(e.props),h()))}static get observedAttributes(){return["gap","minchildwidth","mt","mr","mb","ml"]}get gap(){return this.$$.ctx[0]}set gap(e){this.$$set({gap:e}),h()}get minchildwidth(){return this.$$.ctx[1]}set minchildwidth(e){this.$$set({minchildwidth:e}),h()}get mt(){return this.$$.ctx[2]}set mt(e){this.$$set({mt:e}),h()}get mr(){return this.$$.ctx[3]}set mr(e){this.$$set({mr:e}),h()}get mb(){return this.$$.ctx[4]}set mb(e){this.$$set({mb:e}),h()}get ml(){return this.$$.ctx[5]}set ml(e){this.$$set({ml:e}),h()}}customElements.define("goa-grid",mn);function gn(i){let e,t,r,n,l,a,o,s;return{c(){e=b("div"),t=b("goa-page-block"),r=b("h1"),n=G(i[0]),l=A(),a=b("div"),a.innerHTML="<slot></slot>",o=A(),s=b("slot"),this.c=_,d(a,"class","goa-hero-banner-content"),d(a,"role","note"),d(s,"name","actions"),M(t,"width","full"),d(e,"class","goa-hero"),d(e,"data-testid","background"),Z(e,"background-image","linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url("+i[1]+")"),Z(e,"background-size","cover"),Z(e,"background-position","center"),Z(e,"background-repeat","no-repeat"),Z(e,"min-height",i[2])},m(c,u){y(c,e,u),g(e,t),g(t,r),g(r,n),g(t,l),g(t,a),g(t,o),g(t,s)},p(c,[u]){u&1&&K(n,c[0]),u&2&&Z(e,"background-image","linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url("+c[1]+")"),u&4&&Z(e,"min-height",c[2])},i:_,o:_,d(c){c&&L(e)}}}function bn(i,e,t){let{heading:r}=e,{backgroundurl:n}=e,{minheight:l="600px"}=e;return i.$$set=a=>{"heading"in a&&t(0,r=a.heading),"backgroundurl"in a&&t(1,n=a.backgroundurl),"minheight"in a&&t(2,l=a.minheight)},[r,n,l]}class vn extends O{constructor(e){super();this.shadowRoot.innerHTML="<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>",P(this,{target:this.shadowRoot,props:I(this.attributes),customElement:!0},bn,gn,j,{heading:0,backgroundurl:1,minheight:2},null),e&&(e.target&&y(e.target,this,e.anchor),e.props&&(this.$set(e.props),h()))}static get observedAttributes(){return["heading","backgroundurl","minheight"]}get heading(){return this.$$.ctx[0]}set heading(e){this.$$set({heading:e}),h()}get backgroundurl(){return this.$$.ctx[1]}set backgroundurl(e){this.$$set({backgroundurl:e}),h()}get minheight(){return this.$$.ctx[2]}set minheight(e){this.$$set({minheight:e}),h()}}customElements.define("goa-hero-banner",vn);function wn(i){let e,t,r,n,l;return{c(){e=b("button"),t=b("goa-icon"),this.c=_,M(t,"title",i[3]),M(t,"type",i[0]),M(t,"size",i[1]),M(t,"theme",i[2]),M(t,"inverted",i[9]),d(e,"style",r=""+(F(i[5],i[6],i[7],i[8])+"; --pading-size: "+i[10])),d(e,"title",i[3]),e.disabled=i[11],d(e,"class",i[12]),d(e,"data-testid",i[4])},m(a,o){y(a,e,o),g(e,t),n||(l=W(e,"click",_n),n=!0)},p(a,[o]){o&8&&M(t,"title",a[3]),o&1&&M(t,"type",a[0]),o&2&&M(t,"size",a[1]),o&4&&M(t,"theme",a[2]),o&512&&M(t,"inverted",a[9]),o&1504&&r!==(r=""+(F(a[5],a[6],a[7],a[8])+"; --pading-size: "+a[10]))&&d(e,"style",r),o&8&&d(e,"title",a[3]),o&2048&&(e.disabled=a[11]),o&4096&&d(e,"class",a[12]),o&16&&d(e,"data-testid",a[4])},i:_,o:_,d(a){a&&L(e),n=!1,l()}}}function _n(i){i.target.dispatchEvent(new CustomEvent("_click",{composed:!0,detail:{event:i}}))}function yn(i,e,t){let r,n,l,a,{icon:o}=e,{size:s="medium"}=e,{theme:c="outline"}=e,{variant:u="color"}=e,{title:f=""}=e,{testid:m=""}=e,{disabled:w="false"}=e,{inverted:v="false"}=e,{mt:p=null}=e,{mr:k=null}=e,{mb:x=null}=e,{ml:z=null}=e;return i.$$set=T=>{"icon"in T&&t(0,o=T.icon),"size"in T&&t(1,s=T.size),"theme"in T&&t(2,c=T.theme),"variant"in T&&t(13,u=T.variant),"title"in T&&t(3,f=T.title),"testid"in T&&t(4,m=T.testid),"disabled"in T&&t(14,w=T.disabled),"inverted"in T&&t(15,v=T.inverted),"mt"in T&&t(5,p=T.mt),"mr"in T&&t(6,k=T.mr),"mb"in T&&t(7,x=T.mb),"ml"in T&&t(8,z=T.ml)},i.$$.update=()=>{i.$$.dirty&32768&&t(9,l=V(v)),i.$$.dirty&8704&&t(12,r=`${u} ${l?"inverted":""}`),i.$$.dirty&16384&&t(11,n=V(w)),i.$$.dirty&2&&t(10,a={small:"0.25rem",medium:"0.25rem",large:"0.5rem"}[s])},[o,s,c,f,m,p,k,x,z,l,a,n,r,u,w,v]}class kn extends O{constructor(e){super();this.shadowRoot.innerHTML="<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--color-white)}</style>",P(this,{target:this.shadowRoot,props:I(this.attributes),customElement:!0},yn,wn,j,{icon:0,size:1,theme:2,variant:13,title:3,testid:4,disabled:14,inverted:15,mt:5,mr:6,mb:7,ml:8},null),e&&(e.target&&y(e.target,this,e.anchor),e.props&&(this.$set(e.props),h()))}static get observedAttributes(){return["icon","size","theme","variant","title","testid","disabled","inverted","mt","mr","mb","ml"]}get icon(){return this.$$.ctx[0]}set icon(e){this.$$set({icon:e}),h()}get size(){return this.$$.ctx[1]}set size(e){this.$$set({size:e}),h()}get theme(){return this.$$.ctx[2]}set theme(e){this.$$set({theme:e}),h()}get variant(){return this.$$.ctx[13]}set variant(e){this.$$set({variant:e}),h()}get title(){return this.$$.ctx[3]}set title(e){this.$$set({title:e}),h()}get testid(){return this.$$.ctx[4]}set testid(e){this.$$set({testid:e}),h()}get disabled(){return this.$$.ctx[14]}set disabled(e){this.$$set({disabled:e}),h()}get inverted(){return this.$$.ctx[15]}set inverted(e){this.$$set({inverted:e}),h()}get mt(){return this.$$.ctx[5]}set mt(e){this.$$set({mt:e}),h()}get mr(){return this.$$.ctx[6]}set mr(e){this.$$set({mr:e}),h()}get mb(){return this.$$.ctx[7]}set mb(e){this.$$set({mb:e}),h()}get ml(){return this.$$.ctx[8]}set ml(e){this.$$set({ml:e}),h()}}customElements.define("goa-icon-button",kn);function Zt(i){let e,t;return{c(){e=b("ion-icon"),M(e,"name",t=i[5]==="filled"||i[4].indexOf("logo")===0?i[4]:`${i[4]}-${i[5]}`)},m(r,n){y(r,e,n)},p(r,n){n&48&&t!==(t=r[5]==="filled"||r[4].indexOf("logo")===0?r[4]:`${r[4]}-${r[5]}`)&&M(e,"name",t)},d(r){r&&L(e)}}}function pn(i){let e,t,r=i[4]&&Zt(i);return{c(){e=b("div"),r&&r.c(),this.c=_,d(e,"class","goa-icon"),d(e,"data-testid",i[10]),d(e,"title",i[9]),d(e,"style",t=`
|
|
58
58
|
${F(i[0],i[1],i[2],i[3])}
|
|
59
59
|
--size: ${i[11]};
|
|
60
60
|
--fill-color: ${i[6]};
|