@momentum-ui/web-components 2.14.2 → 2.14.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/md-7.js +1 -1
- package/dist/chunks/md-83.js +1 -1
- package/package.json +3 -3
package/dist/chunks/md-7.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[7],{17:function(t,o,d){"use strict";d.r(o),d.d(o,"buttonSize",(function(){return l})),d.d(o,"buttonTag",(function(){return h})),d.d(o,"buttonType",(function(){return v})),d.d(o,"buttonRoles",(function(){return g})),d.d(o,"buttonVariant",(function(){return f})),d.d(o,"buttonColor",(function(){return y})),d.d(o,"buttonAriaLive",(function(){return k})),d.d(o,"Button",(function(){return p}));var r=d(59),a=(d(51),d(6)),n=d(36),e=d(5),b=d(0),i=d(2),c=d(4),m=d(3),u=b.css`[class|=md-button__container]{align-content:center;align-items:center;display:inline-flex;flex-flow:column nowrap;justify-content:center;width:116px}[class|=md-button__container][class$="--small"]{width:104px}:host .md-button{transition:background-color 150ms ease;border:none;border-radius:1.125rem;cursor:pointer;display:inline-flex;font-family:var(--brand-font-medium, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:550;font-size:1rem;line-height:normal;min-width:4.5rem;position:relative;text-align:center;text-decoration:none;align-items:center;justify-content:center}:host .md-button>*{font-size:inherit}:host .md-button .md-button__children{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:center;max-width:100%;flex:1}:host .md-button+.md-button{margin-left:.3125rem}:host .md-button.active-state.focus-state,:host .md-button.active-state:focus,:host .md-button:active.focus-state,:host .md-button:active:focus{box-shadow:none}:host .md-button.disabled,:host .md-button.md-button--disabled,:host .md-button[disabled]{box-shadow:none;cursor:default;pointer-events:none}:host .md-button.disabled:focus,:host .md-button.disabled:hover,:host .md-button.md-button--disabled:focus,:host .md-button.md-button--disabled:hover,:host .md-button[disabled]:focus,:host .md-button[disabled]:hover{box-shadow:none}:host .md-button{font-size:1rem;line-height:normal;padding:var(--button-padding-36,.5625rem 1.125rem .625rem 1.125rem);height:2.25rem}:host .md-button .md-prepend{margin-right:calc(2.25rem/4)}:host .md-button .md-append{margin-left:calc(2.25rem/4)}:host .md-button{border-radius:1.125rem}:host .md-button::after{border-radius:calc(1.125rem + 2px)}:host .md-button{background-color:#dedede;border-color:transparent;color:#000}:host .md-button.disabled,:host .md-button.md-button--disabled,:host .md-button[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button.disabled:focus,:host .md-button.disabled:hover,:host .md-button.md-button--disabled:focus,:host .md-button.md-button--disabled:hover,:host .md-button[disabled]:focus,:host .md-button[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button.focus-state,:host .md-button:focus{box-shadow:none;outline:0}:host .md-button:focus{background-color:#ccc;color:#000}:host .md-button:hover{background-color:#ccc;color:#000}:host .md-button.active,:host .md-button:active{background-color:#b2b2b2;color:#000}:host .md-button{background-color:var(--button-secondary-bg-color,#dedede);box-sizing:border-box;color:var(--button-secondary-text-color,#121212)}:host .md-button:hover{background-color:var(--button-secondary-hover-bg-color,#ccc);color:var(--button-secondary-text-color,#121212)}:host .md-button:active{background-color:var(--button-secondary-pressed-bg-color,#b2b2b2);color:var(--button-secondary-text-color,#121212)}:host .md-button.disabled,:host .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host .md-button.disabled:focus,:host .md-button:disabled:focus{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host .md-button::after{border-radius:calc(1.125rem + 2px);content:"";display:block;height:calc(100% + 2px*2);left:0;margin:-2px;position:absolute;top:0;width:calc(100% + 2px*2)}:host .md-button:focus::after{box-shadow:0 0 0 .125rem var(--button-focus-ring-color,#007aa3)}:host .md-button+.md-button__label{color:var(--md-primary-text-color,#121212);display:block;overflow:hidden;text-align:center;width:100%}:host .md-button--left{text-align:left;text-indent:.75rem}:host .md-button--right{padding-right:.75rem;text-align:right}:host .md-button--outline{box-shadow:0 0 0 1px #ccc}:host .md-button--outline:hover{box-shadow:none!important}:host .md-button--none{box-shadow:none;min-width:0}:host .md-button--none{background-color:rgba(0,0,0,0);border-color:transparent;color:inherit}:host .md-button--none.disabled,:host .md-button--none.md-button--disabled,:host .md-button--none[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--none.disabled:focus,:host .md-button--none.disabled:hover,:host .md-button--none.md-button--disabled:focus,:host .md-button--none.md-button--disabled:hover,:host .md-button--none[disabled]:focus,:host .md-button--none[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--none:focus{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--none:hover{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--none.active,:host .md-button--none:active{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--none{font-size:1rem;line-height:normal;padding:0;height:auto}:host .md-button--none .md-prepend{margin-right:calc(100%/4)}:host .md-button--none .md-append{margin-left:calc(100%/4)}:host .md-button--none{border-radius:0}:host .md-button--none::after{border-radius:0}:host .md-button--size-none{min-width:0}:host .md-button--size-none{font-size:1rem;line-height:normal;padding:0;height:auto}:host .md-button--size-none .md-prepend{margin-right:calc(100%/4)}:host .md-button--size-none .md-append{margin-left:calc(100%/4)}:host .md-button--size-none{border-radius:0}:host .md-button--size-none::after{border-radius:0}:host .md-button--24{font-size:var(--button-font-size-extra-small,.625rem);line-height:normal;padding:var(--button-padding-24,.25rem .75rem .3125rem .75rem);height:1.5rem}:host .md-button--24 .md-prepend{margin-right:calc(1.5rem/4)}:host .md-button--24 .md-append{margin-left:calc(1.5rem/4)}:host .md-button--24{border-radius:.75rem}:host .md-button--24::after{border-radius:calc(.75rem + 2px)}:host .md-button--28{font-size:var(--button-font-size-small,.75rem);line-height:normal;padding:var(--button-padding-28,.375rem .875rem .4375rem .875rem);height:1.75rem}:host .md-button--28 .md-prepend{margin-right:calc(1.75rem/4)}:host .md-button--28 .md-append{margin-left:calc(1.75rem/4)}:host .md-button--28{border-radius:.875rem}:host .md-button--28::after{border-radius:calc(.875rem + 2px)}:host .md-button--32{font-size:var(--button-font-size-medium,.875rem);line-height:normal;padding:var(--button-padding-32,.5rem 1rem .5625rem 1rem);height:2rem}:host .md-button--32 .md-prepend{margin-right:calc(2rem/4)}:host .md-button--32 .md-append{margin-left:calc(2rem/4)}:host .md-button--32{border-radius:1rem}:host .md-button--32::after{border-radius:calc(1rem + 2px)}:host .md-button--36{font-size:var(--button-font-size-medium,.875rem);line-height:normal;padding:var(--button-padding-36,.5625rem 1.125rem .625rem 1.125rem);height:2.25rem}:host .md-button--36 .md-prepend{margin-right:calc(2.25rem/4)}:host .md-button--36 .md-append{margin-left:calc(2.25rem/4)}:host .md-button--40{font-size:1rem;line-height:normal;padding:var(--button-padding-40,.6875rem 1.25rem .75rem 1.25rem);height:2.5rem}:host .md-button--40 .md-prepend{margin-right:calc(2.5rem/4)}:host .md-button--40 .md-append{margin-left:calc(2.5rem/4)}:host .md-button--40{border-radius:1.25rem}:host .md-button--40::after{border-radius:calc(1.25rem + 2px)}:host .md-button--52{font-size:1rem;line-height:normal;padding:var(--button-padding-52,.875rem 1.625rem .9375rem 1.625rem);height:3.25rem}:host .md-button--52 .md-prepend{margin-right:calc(3.25rem/4)}:host .md-button--52 .md-append{margin-left:calc(3.25rem/4)}:host .md-button--52{border-radius:1.625rem}:host .md-button--52::after{border-radius:calc(1.625rem + 2px)}:host .md-button--circle{padding:0;width:2.25rem;height:2.25rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle{border-radius:100%}:host .md-button--circle::after{border-radius:100%}:host .md-button--circle[class*="--none"]{width:auto;height:auto;min-width:0;min-height:0}:host .md-button--circle[class*="--none"]{background-color:rgba(0,0,0,0);border-color:transparent;color:inherit}:host .md-button--circle[class*="--none"].disabled,:host .md-button--circle[class*="--none"].md-button--disabled,:host .md-button--circle[class*="--none"][disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--circle[class*="--none"].disabled:focus,:host .md-button--circle[class*="--none"].disabled:hover,:host .md-button--circle[class*="--none"].md-button--disabled:focus,:host .md-button--circle[class*="--none"].md-button--disabled:hover,:host .md-button--circle[class*="--none"][disabled]:focus,:host .md-button--circle[class*="--none"][disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--circle[class*="--none"]:focus{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--circle[class*="--none"]:hover{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--circle[class*="--none"].active,:host .md-button--circle[class*="--none"]:active{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--circle[class*="--size-none"]{width:auto;height:auto;min-width:0;min-height:0}:host .md-button--circle[class*="--20"]{width:1.25rem;height:1.25rem;min-width:0;min-height:0;font-size:var(--button-font-size-extra-small,.5rem);line-height:var(--button-font-size-extra-small,.5rem)}:host .md-button--circle[class*="--24"]{width:1.5rem;height:1.5rem;min-width:0;min-height:0;font-size:var(--button-font-size-extra-small,.625rem);line-height:var(--button-font-size-extra-small,.625rem)}:host .md-button--circle[class*="--28"]{width:1.75rem;height:1.75rem;min-width:0;min-height:0;font-size:var(--button-font-size-small,.75rem);line-height:var(--button-font-size-small,.75rem)}:host .md-button--circle[class*="--32"]{width:2rem;height:2rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle[class*="--36"]{width:2.25rem;height:2.25rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle[class*="--40"]{width:2.5rem;height:2.5rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle[class*="--44"]{width:2.75rem;height:2.75rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle[class*="--52"]{width:3.25rem;height:3.25rem;min-width:0;min-height:0;font-size:1.375rem;line-height:1.375rem}:host .md-button--circle[class*="--56"]{width:3.5rem;height:3.5rem;min-width:0;min-height:0;font-size:1.5rem;line-height:1.5rem}:host .md-button--circle[class*="--68"]{width:4.25rem;height:4.25rem;min-width:0;min-height:0;font-size:1.75rem;line-height:1.75rem}:host .md-button--circle[class*="--72"]{width:4.5rem;height:4.5rem;min-width:0;min-height:0;font-size:2rem;line-height:2rem}:host .md-button--circle[class*="--84"]{width:5.25rem;height:5.25rem;min-width:0;min-height:0;font-size:2.5rem;line-height:2.5rem}:host .md-button--circle.icon{font-family:momentum-ui-icons}:host .md-button .md-loading{left:50%;position:absolute;transform:translateX(-50%)}:host .md-button--blue{background-color:var(--button-accent-bg-color,#007aa3);border-color:transparent;color:#fff}:host .md-button--blue.disabled,:host .md-button--blue.md-button--disabled,:host .md-button--blue[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--blue.disabled:focus,:host .md-button--blue.disabled:hover,:host .md-button--blue.md-button--disabled:focus,:host .md-button--blue.md-button--disabled:hover,:host .md-button--blue[disabled]:focus,:host .md-button--blue[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--blue.focus-state,:host .md-button--blue:focus{box-shadow:none;outline:0}:host .md-button--blue:focus{background-color:var(--button-accent-hover-bg-color,#005e7d);color:#fff}:host .md-button--blue:hover{background-color:var(--button-accent-hover-bg-color,#005e7d);color:#fff}:host .md-button--blue.active,:host .md-button--blue:active{background-color:var(--button-accent-pressed-bg-color,#064157);color:#fff}:host .md-button--blue.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:var(--button-primary-outline-color,#005e7d);box-shadow:0 0 0 1px var(--button-primary-outline-color,#005e7d)}:host .md-button--blue.md-button--outline.disabled,:host .md-button--blue.md-button--outline.md-button--disabled,:host .md-button--blue.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--blue.md-button--outline.disabled:focus,:host .md-button--blue.md-button--outline.disabled:hover,:host .md-button--blue.md-button--outline.md-button--disabled:focus,:host .md-button--blue.md-button--outline.md-button--disabled:hover,:host .md-button--blue.md-button--outline[disabled]:focus,:host .md-button--blue.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--blue.md-button--outline.focus-state,:host .md-button--blue.md-button--outline:focus{box-shadow:none;outline:0}:host .md-button--blue.md-button--outline:focus{background-color:var(--button-accent-hover-bg-color,#005e7d);color:#fff}:host .md-button--blue.md-button--outline:hover{background-color:var(--button-accent-hover-bg-color,#005e7d);color:#fff}:host .md-button--blue.md-button--outline.active,:host .md-button--blue.md-button--outline:active{background-color:var(--button-accent-pressed-bg-color,#064157);color:#fff}:host .md-button--red{background-color:#f7644a;border-color:transparent;color:#fff}:host .md-button--red.disabled,:host .md-button--red.md-button--disabled,:host .md-button--red[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--red.disabled:focus,:host .md-button--red.disabled:hover,:host .md-button--red.md-button--disabled:focus,:host .md-button--red.md-button--disabled:hover,:host .md-button--red[disabled]:focus,:host .md-button--red[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--red:focus{background-color:#d4371c;color:#fff}:host .md-button--red:hover{background-color:#d4371c;color:#fff}:host .md-button--red.active,:host .md-button--red:active{background-color:#a12512;color:#fff}:host .md-button--red.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#f7644a;box-shadow:0 0 0 1px #f7644a}:host .md-button--red.md-button--outline.disabled,:host .md-button--red.md-button--outline.md-button--disabled,:host .md-button--red.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--red.md-button--outline.disabled:focus,:host .md-button--red.md-button--outline.disabled:hover,:host .md-button--red.md-button--outline.md-button--disabled:focus,:host .md-button--red.md-button--outline.md-button--disabled:hover,:host .md-button--red.md-button--outline[disabled]:focus,:host .md-button--red.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--red.md-button--outline:focus{background-color:#d4371c;color:#fff}:host .md-button--red.md-button--outline:hover{background-color:#d4371c;color:#fff}:host .md-button--red.md-button--outline.active,:host .md-button--red.md-button--outline:active{background-color:#a12512;color:#fff}:host .md-button--green{background-color:#00ab50;border-color:transparent;color:#fff}:host .md-button--green.disabled,:host .md-button--green.md-button--disabled,:host .md-button--green[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--green.disabled:focus,:host .md-button--green.disabled:hover,:host .md-button--green.md-button--disabled:focus,:host .md-button--green.md-button--disabled:hover,:host .md-button--green[disabled]:focus,:host .md-button--green[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--green:focus{background-color:#00853c;color:#fff}:host .md-button--green:hover{background-color:#00853c;color:#fff}:host .md-button--green.active,:host .md-button--green:active{background-color:#03612c;color:#fff}:host .md-button--green.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#00ab50;box-shadow:0 0 0 1px #00ab50}:host .md-button--green.md-button--outline.disabled,:host .md-button--green.md-button--outline.md-button--disabled,:host .md-button--green.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--green.md-button--outline.disabled:focus,:host .md-button--green.md-button--outline.disabled:hover,:host .md-button--green.md-button--outline.md-button--disabled:focus,:host .md-button--green.md-button--outline.md-button--disabled:hover,:host .md-button--green.md-button--outline[disabled]:focus,:host .md-button--green.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--green.md-button--outline:focus{background-color:#00853c;color:#fff}:host .md-button--green.md-button--outline:hover{background-color:#00853c;color:#fff}:host .md-button--green.md-button--outline.active,:host .md-button--green.md-button--outline:active{background-color:#03612c;color:#fff}:host .md-button--orange{background-color:#f26b1d;border-color:transparent;color:#fff}:host .md-button--orange.disabled,:host .md-button--orange.md-button--disabled,:host .md-button--orange[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--orange.disabled:focus,:host .md-button--orange.disabled:hover,:host .md-button--orange.md-button--disabled:focus,:host .md-button--orange.md-button--disabled:hover,:host .md-button--orange[disabled]:focus,:host .md-button--orange[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--orange:focus{background-color:#c74f0e;color:#fff}:host .md-button--orange:hover{background-color:#c74f0e;color:#fff}:host .md-button--orange.active,:host .md-button--orange:active{background-color:#914017;color:#fff}:host .md-button--orange.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#f26b1d;box-shadow:0 0 0 1px #f26b1d}:host .md-button--orange.md-button--outline.disabled,:host .md-button--orange.md-button--outline.md-button--disabled,:host .md-button--orange.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--orange.md-button--outline.disabled:focus,:host .md-button--orange.md-button--outline.disabled:hover,:host .md-button--orange.md-button--outline.md-button--disabled:focus,:host .md-button--orange.md-button--outline.md-button--disabled:hover,:host .md-button--orange.md-button--outline[disabled]:focus,:host .md-button--orange.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--orange.md-button--outline:focus{background-color:#c74f0e;color:#fff}:host .md-button--orange.md-button--outline:hover{background-color:#c74f0e;color:#fff}:host .md-button--orange.md-button--outline.active,:host .md-button--orange.md-button--outline:active{background-color:#914017;color:#fff}:host .md-button--yellow{background-color:#d97f00;border-color:transparent;color:#fff}:host .md-button--yellow.disabled,:host .md-button--yellow.md-button--disabled,:host .md-button--yellow[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--yellow.disabled:focus,:host .md-button--yellow.disabled:hover,:host .md-button--yellow.md-button--disabled:focus,:host .md-button--yellow.md-button--disabled:hover,:host .md-button--yellow[disabled]:focus,:host .md-button--yellow[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--yellow:focus{background-color:#a85f00;color:#fff}:host .md-button--yellow:hover{background-color:#a85f00;color:#fff}:host .md-button--yellow.active,:host .md-button--yellow:active{background-color:#7d4705;color:#fff}:host .md-button--yellow.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#d97f00;box-shadow:0 0 0 1px #d97f00}:host .md-button--yellow.md-button--outline.disabled,:host .md-button--yellow.md-button--outline.md-button--disabled,:host .md-button--yellow.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--yellow.md-button--outline.disabled:focus,:host .md-button--yellow.md-button--outline.disabled:hover,:host .md-button--yellow.md-button--outline.md-button--disabled:focus,:host .md-button--yellow.md-button--outline.md-button--disabled:hover,:host .md-button--yellow.md-button--outline[disabled]:focus,:host .md-button--yellow.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--yellow.md-button--outline:focus{background-color:#a85f00;color:#fff}:host .md-button--yellow.md-button--outline:hover{background-color:#a85f00;color:#fff}:host .md-button--yellow.md-button--outline.active,:host .md-button--yellow.md-button--outline:active{background-color:#7d4705;color:#fff}:host .md-button--mint{background-color:#16a693;border-color:transparent;color:#fff}:host .md-button--mint.disabled,:host .md-button--mint.md-button--disabled,:host .md-button--mint[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--mint.disabled:focus,:host .md-button--mint.disabled:hover,:host .md-button--mint.md-button--disabled:focus,:host .md-button--mint.md-button--disabled:hover,:host .md-button--mint[disabled]:focus,:host .md-button--mint[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--mint:focus{background-color:#148579;color:#fff}:host .md-button--mint:hover{background-color:#148579;color:#fff}:host .md-button--mint.active,:host .md-button--mint:active{background-color:#12615a;color:#fff}:host .md-button--mint.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#16a693;box-shadow:0 0 0 1px #16a693}:host .md-button--mint.md-button--outline.disabled,:host .md-button--mint.md-button--outline.md-button--disabled,:host .md-button--mint.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--mint.md-button--outline.disabled:focus,:host .md-button--mint.md-button--outline.disabled:hover,:host .md-button--mint.md-button--outline.md-button--disabled:focus,:host .md-button--mint.md-button--outline.md-button--disabled:hover,:host .md-button--mint.md-button--outline[disabled]:focus,:host .md-button--mint.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--mint.md-button--outline:focus{background-color:#148579;color:#fff}:host .md-button--mint.md-button--outline:hover{background-color:#148579;color:#fff}:host .md-button--mint.md-button--outline.active,:host .md-button--mint.md-button--outline:active{background-color:#12615a;color:#fff}:host .md-button--purple{background-color:#e060de;border-color:transparent;color:#fff}:host .md-button--purple.disabled,:host .md-button--purple.md-button--disabled,:host .md-button--purple[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--purple.disabled:focus,:host .md-button--purple.disabled:hover,:host .md-button--purple.md-button--disabled:focus,:host .md-button--purple.md-button--disabled:hover,:host .md-button--purple[disabled]:focus,:host .md-button--purple[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--purple:focus{background-color:#c233c4;color:#fff}:host .md-button--purple:hover{background-color:#c233c4;color:#fff}:host .md-button--purple.active,:host .md-button--purple:active{background-color:#932099;color:#fff}:host .md-button--purple.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#e060de;box-shadow:0 0 0 1px #e060de}:host .md-button--purple.md-button--outline.disabled,:host .md-button--purple.md-button--outline.md-button--disabled,:host .md-button--purple.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--purple.md-button--outline.disabled:focus,:host .md-button--purple.md-button--outline.disabled:hover,:host .md-button--purple.md-button--outline.md-button--disabled:focus,:host .md-button--purple.md-button--outline.md-button--disabled:hover,:host .md-button--purple.md-button--outline[disabled]:focus,:host .md-button--purple.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--purple.md-button--outline:focus{background-color:#c233c4;color:#fff}:host .md-button--purple.md-button--outline:hover{background-color:#c233c4;color:#fff}:host .md-button--purple.md-button--outline.active,:host .md-button--purple.md-button--outline:active{background-color:#932099;color:#fff}:host .md-button--pink{background-color:#f0677e;border-color:transparent;color:#fff}:host .md-button--pink.disabled,:host .md-button--pink.md-button--disabled,:host .md-button--pink[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--pink.disabled:focus,:host .md-button--pink.disabled:hover,:host .md-button--pink.md-button--disabled:focus,:host .md-button--pink.md-button--disabled:hover,:host .md-button--pink[disabled]:focus,:host .md-button--pink[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--pink:focus{background-color:#d43b52;color:#fff}:host .md-button--pink:hover{background-color:#d43b52;color:#fff}:host .md-button--pink.active,:host .md-button--pink:active{background-color:#a12a3a;color:#fff}:host .md-button--pink.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#f0677e;box-shadow:0 0 0 1px #f0677e}:host .md-button--pink.md-button--outline.disabled,:host .md-button--pink.md-button--outline.md-button--disabled,:host .md-button--pink.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--pink.md-button--outline.disabled:focus,:host .md-button--pink.md-button--outline.disabled:hover,:host .md-button--pink.md-button--outline.md-button--disabled:focus,:host .md-button--pink.md-button--outline.md-button--disabled:hover,:host .md-button--pink.md-button--outline[disabled]:focus,:host .md-button--pink.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--pink.md-button--outline:focus{background-color:#d43b52;color:#fff}:host .md-button--pink.md-button--outline:hover{background-color:#d43b52;color:#fff}:host .md-button--pink.md-button--outline.active,:host .md-button--pink.md-button--outline:active{background-color:#a12a3a;color:#fff}:host .md-button--cyan{background-color:#00a3b5;border-color:transparent;color:#fff}:host .md-button--cyan.disabled,:host .md-button--cyan.md-button--disabled,:host .md-button--cyan[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--cyan.disabled:focus,:host .md-button--cyan.disabled:hover,:host .md-button--cyan.md-button--disabled:focus,:host .md-button--cyan.md-button--disabled:hover,:host .md-button--cyan[disabled]:focus,:host .md-button--cyan[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--cyan:focus{background-color:#008094;color:#fff}:host .md-button--cyan:hover{background-color:#008094;color:#fff}:host .md-button--cyan.active,:host .md-button--cyan:active{background-color:#066070;color:#fff}:host .md-button--cyan.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#00a3b5;box-shadow:0 0 0 1px #00a3b5}:host .md-button--cyan.md-button--outline.disabled,:host .md-button--cyan.md-button--outline.md-button--disabled,:host .md-button--cyan.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--cyan.md-button--outline.disabled:focus,:host .md-button--cyan.md-button--outline.disabled:hover,:host .md-button--cyan.md-button--outline.md-button--disabled:focus,:host .md-button--cyan.md-button--outline.md-button--disabled:hover,:host .md-button--cyan.md-button--outline[disabled]:focus,:host .md-button--cyan.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--cyan.md-button--outline:focus{background-color:#008094;color:#fff}:host .md-button--cyan.md-button--outline:hover{background-color:#008094;color:#fff}:host .md-button--cyan.md-button--outline.active,:host .md-button--cyan.md-button--outline:active{background-color:#066070;color:#fff}:host .md-button--white{background-color:#fff;border-color:transparent;color:#000}:host .md-button--white.disabled,:host .md-button--white.md-button--disabled,:host .md-button--white[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--white.disabled:focus,:host .md-button--white.disabled:hover,:host .md-button--white.md-button--disabled:focus,:host .md-button--white.md-button--disabled:hover,:host .md-button--white[disabled]:focus,:host .md-button--white[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--white:focus{background-color:#ededed;color:#000}:host .md-button--white:hover{background-color:#ededed;color:#000}:host .md-button--white.active,:host .md-button--white:active{background-color:#ccc;color:#000}:host .md-button--white.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:var(--button-inverted-white-hover-bg-color,#292929);box-shadow:0 0 0 1px #ccc}:host .md-button--white.md-button--outline.disabled,:host .md-button--white.md-button--outline.md-button--disabled,:host .md-button--white.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--white.md-button--outline.disabled:focus,:host .md-button--white.md-button--outline.disabled:hover,:host .md-button--white.md-button--outline.md-button--disabled:focus,:host .md-button--white.md-button--outline.md-button--disabled:hover,:host .md-button--white.md-button--outline[disabled]:focus,:host .md-button--white.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--white.md-button--outline:focus{background-color:#ededed;color:#3b3b3b}:host .md-button--white.md-button--outline:hover{background-color:#ededed;color:#3b3b3b}:host .md-button--white.md-button--outline.active,:host .md-button--white.md-button--outline:active{background-color:#ccc;color:#3b3b3b}:host .md-button--dark-gray{background-color:var(--button-inverted-white-hover-bg-color,#292929);border-color:transparent;color:#fff}:host .md-button--dark-gray.disabled,:host .md-button--dark-gray.md-button--disabled,:host .md-button--dark-gray[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--dark-gray.disabled:focus,:host .md-button--dark-gray.disabled:hover,:host .md-button--dark-gray.md-button--disabled:focus,:host .md-button--dark-gray.md-button--disabled:hover,:host .md-button--dark-gray[disabled]:focus,:host .md-button--dark-gray[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--dark-gray:focus{background-color:#3b3b3b;color:#fff}:host .md-button--dark-gray:hover{background-color:#3b3b3b;color:#fff}:host .md-button--dark-gray.active,:host .md-button--dark-gray:active{background-color:#545454;color:#fff}:host .md-button--dark-gray.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:var(--button-inverted-white-hover-bg-color,#292929);box-shadow:0 0 0 1px var(--button-inverted-white-hover-bg-color,#292929)}:host .md-button--dark-gray.md-button--outline.disabled,:host .md-button--dark-gray.md-button--outline.md-button--disabled,:host .md-button--dark-gray.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--dark-gray.md-button--outline.disabled:focus,:host .md-button--dark-gray.md-button--outline.disabled:hover,:host .md-button--dark-gray.md-button--outline.md-button--disabled:focus,:host .md-button--dark-gray.md-button--outline.md-button--disabled:hover,:host .md-button--dark-gray.md-button--outline[disabled]:focus,:host .md-button--dark-gray.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--dark-gray.md-button--outline:focus{background-color:#3b3b3b;color:#fff}:host .md-button--dark-gray.md-button--outline:hover{background-color:#3b3b3b;color:#fff}:host .md-button--dark-gray.md-button--outline.active,:host .md-button--dark-gray.md-button--outline:active{background-color:#545454;color:#fff}:host .md-button--duck-egg{background-color:#949494;border-color:transparent;color:#fff}:host .md-button--duck-egg.disabled,:host .md-button--duck-egg.md-button--disabled,:host .md-button--duck-egg[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--duck-egg.disabled:focus,:host .md-button--duck-egg.disabled:hover,:host .md-button--duck-egg.md-button--disabled:focus,:host .md-button--duck-egg.md-button--disabled:hover,:host .md-button--duck-egg[disabled]:focus,:host .md-button--duck-egg[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--duck-egg:focus{background-color:#707070;color:#fff}:host .md-button--duck-egg:hover{background-color:#707070;color:#fff}:host .md-button--duck-egg.active,:host .md-button--duck-egg:active{background-color:#545454;color:#fff}:host .md-button--duck-egg.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#949494;box-shadow:0 0 0 1px #949494}:host .md-button--duck-egg.md-button--outline.disabled,:host .md-button--duck-egg.md-button--outline.md-button--disabled,:host .md-button--duck-egg.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--duck-egg.md-button--outline.disabled:focus,:host .md-button--duck-egg.md-button--outline.disabled:hover,:host .md-button--duck-egg.md-button--outline.md-button--disabled:focus,:host .md-button--duck-egg.md-button--outline.md-button--disabled:hover,:host .md-button--duck-egg.md-button--outline[disabled]:focus,:host .md-button--duck-egg.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--duck-egg.md-button--outline:focus{background-color:#707070;color:#fff}:host .md-button--duck-egg.md-button--outline:hover{background-color:#707070;color:#fff}:host .md-button--duck-egg.md-button--outline.active,:host .md-button--duck-egg.md-button--outline:active{background-color:#545454;color:#fff}:host .md-button--violet{background-color:#a87ff1;border-color:transparent;color:#fff}:host .md-button--violet.disabled,:host .md-button--violet.md-button--disabled,:host .md-button--violet[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--violet.disabled:focus,:host .md-button--violet.disabled:hover,:host .md-button--violet.md-button--disabled:focus,:host .md-button--violet.md-button--disabled:hover,:host .md-button--violet[disabled]:focus,:host .md-button--violet[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--violet:focus{background-color:#875ae1;color:#fff}:host .md-button--violet:hover{background-color:#875ae1;color:#fff}:host .md-button--violet.active,:host .md-button--violet:active{background-color:#643abd;color:#fff}:host .md-button--violet.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#a87ff1;box-shadow:0 0 0 1px #a87ff1}:host .md-button--violet.md-button--outline.disabled,:host .md-button--violet.md-button--outline.md-button--disabled,:host .md-button--violet.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--violet.md-button--outline.disabled:focus,:host .md-button--violet.md-button--outline.disabled:hover,:host .md-button--violet.md-button--outline.md-button--disabled:focus,:host .md-button--violet.md-button--outline.md-button--disabled:hover,:host .md-button--violet.md-button--outline[disabled]:focus,:host .md-button--violet.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--violet.md-button--outline:focus{background-color:#875ae1;color:#fff}:host .md-button--violet.md-button--outline:hover{background-color:#875ae1;color:#fff}:host .md-button--violet.md-button--outline.active,:host .md-button--violet.md-button--outline:active{background-color:#643abd;color:#fff}:host .md-button--link{color:#007aa3}:host .md-button--link{background-color:rgba(0,0,0,0);border-color:transparent;color:#fff}:host .md-button--link.disabled,:host .md-button--link.md-button--disabled,:host .md-button--link[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--link.disabled:focus,:host .md-button--link.disabled:hover,:host .md-button--link.md-button--disabled:focus,:host .md-button--link.md-button--disabled:hover,:host .md-button--link[disabled]:focus,:host .md-button--link[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--link:focus{background-color:#ccc;color:#fff}:host .md-button--link:hover{background-color:#ccc;color:#fff}:host .md-button--link.active,:host .md-button--link:active{background-color:#b2b2b2;color:#fff}:host .md-button--color-none{background-color:rgba(0,0,0,0);border-color:transparent;color:inherit}:host .md-button--color-none.disabled,:host .md-button--color-none.md-button--disabled,:host .md-button--color-none[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--color-none.disabled:focus,:host .md-button--color-none.disabled:hover,:host .md-button--color-none.md-button--disabled:focus,:host .md-button--color-none.md-button--disabled:hover,:host .md-button--color-none[disabled]:focus,:host .md-button--color-none[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--color-none:focus{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--color-none:hover{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--color-none.active,:host .md-button--color-none:active{background-color:rgba(0,0,0,0);color:inherit}:host .md-button[class*=md-button--icon] .md-icon{fill:inherit}:host .md-button.md-button--icon{min-width:0}:host .md-button.md-button--icon{background-color:rgba(0,0,0,0);border-color:transparent;color:inherit}:host .md-button.md-button--icon.disabled,:host .md-button.md-button--icon.md-button--disabled,:host .md-button.md-button--icon[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button.md-button--icon.disabled:focus,:host .md-button.md-button--icon.disabled:hover,:host .md-button.md-button--icon.md-button--disabled:focus,:host .md-button.md-button--icon.md-button--disabled:hover,:host .md-button.md-button--icon[disabled]:focus,:host .md-button.md-button--icon[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button.md-button--icon:focus{background-color:rgba(0,0,0,0);color:inherit}:host .md-button.md-button--icon:hover{background-color:rgba(0,0,0,0);color:inherit}:host .md-button.md-button--icon.active,:host .md-button.md-button--icon:active{background-color:rgba(0,0,0,0);color:inherit}:host .md-button.md-button--icon{color:#545454;fill:#545454}:host .md-button.md-button--icon.disabled,:host .md-button.md-button--icon.md-button--disabled,:host .md-button.md-button--icon[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,0)}:host .md-button.md-button--icon.disabled:focus,:host .md-button.md-button--icon.disabled:hover,:host .md-button.md-button--icon.md-button--disabled:focus,:host .md-button.md-button--icon.md-button--disabled:hover,:host .md-button.md-button--icon[disabled]:focus,:host .md-button.md-button--icon[disabled]:hover{background-color:rgba(0,0,0,0);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button.md-button--icon.hover-state,:host .md-button.md-button--icon:hover{color:#007aa3;fill:#007aa3}:host .md-button.md-button--icon.active-state,:host .md-button.md-button--icon:active{color:#005e7d;fill:#005e7d}:host .md-button.md-button--icon{font-size:1rem;line-height:normal;padding:0;height:auto}:host .md-button.md-button--icon .md-prepend{margin-right:calc(100%/4)}:host .md-button.md-button--icon .md-append{margin-left:calc(100%/4)}:host .md-button.md-button--icon{border-radius:0}:host .md-button.md-button--icon::after{border-radius:0}:host .md-button.md-button--icon.md-button--icon-white{color:#fff;fill:#fff}:host .md-button.md-button--icon.md-button--icon-white.disabled,:host .md-button.md-button--icon.md-button--icon-white.md-button--disabled,:host .md-button.md-button--icon.md-button--icon-white[disabled]{color:rgba(255,255,255,.2);fill:rgba(255,255,255,.2);background-color:rgba(0,0,0,0)}:host .md-button.md-button--icon.md-button--icon-white.disabled:focus,:host .md-button.md-button--icon.md-button--icon-white.disabled:hover,:host .md-button.md-button--icon.md-button--icon-white.md-button--disabled:focus,:host .md-button.md-button--icon.md-button--icon-white.md-button--disabled:hover,:host .md-button.md-button--icon.md-button--icon-white[disabled]:focus,:host .md-button.md-button--icon.md-button--icon-white[disabled]:hover{background-color:rgba(0,0,0,0);color:rgba(255,255,255,.2);fill:rgba(255,255,255,.2)}:host .md-button.md-button--icon.md-button--icon-white.hover-state,:host .md-button.md-button--icon.md-button--icon-white:hover{color:rgba(255,255,255,.92);fill:rgba(255,255,255,.92)}:host .md-button.md-button--icon.md-button--icon-white.active-state,:host .md-button.md-button--icon.md-button--icon-white:active{color:rgba(255,255,255,.84);fill:rgba(255,255,255,.84)}:host .md-button.md-button--onlyicon.disabled,:host .md-button.md-button--onlyicon:disabled{background-color:rgba(0,0,0,0)!important}:host([type=reset]){appearance:none!important}:host([type=submit]){appearance:none!important}:host([variant=primary]) .md-button{background-color:var(--button-primary-bg-color,#007aa3);color:var(--button-primary-text-color,#f7f7f7)}:host([variant=primary]) .md-button:hover{background-color:var(--button-primary-hover-bg-color,#005e7d)}:host([variant=primary]) .md-button:active{background-color:var(--button-primary-pressed-bg-color,#064157)}:host([variant=primary]) .md-button.disabled,:host([variant=primary]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=promotional]) .md-button{background:var(--button-promotional-bg-color,#007aa3);color:var(--button-promotional-text-color,var(--button-primary-text-color,#f7f7f7))}:host([variant=promotional]) .md-button:hover{background:var(--button-promotional-hover-bg-color,#005e7d)}:host([variant=promotional]) .md-button:active{background:var(--button-promotional-pressed-bg-color,#064157)}:host([variant=promotional]) .md-button.disabled,:host([variant=promotional]) .md-button:disabled{background:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=ghost]) .md-button{background-color:var(--button-ghost-bg-color,transparent);color:var(--button-ghost-text-color,var(--button-secondary-text-color));border:unset}:host([variant=ghost]) .md-button:hover{background-color:var(--button-ghost-hover-bg-color,var(--button-secondary-hover-bg-color))}:host([variant=ghost]) .md-button:active{background-color:var(--button-ghost-pressed-bg-color,var(--button-secondary-pressed-bg-color))}:host([variant=ghost]) .md-button.disabled,:host([variant=ghost]) .md-button:disabled{background-color:var(--button-ghost-disabled-bg-color,transparent);color:var(--button-ghost-disabled-text-color,var(--button-disabled-text-color))}:host([variant=secondary]) .md-button:not(.isActive){background-color:var(--button-secondary-bg-color,#dedede);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-secondary-border-color)}:host([variant=secondary]) .md-button:not(.isActive):hover{background-color:var(--button-secondary-hover-bg-color,#ccc);color:var(--button-secondary-text-color,#121212)}:host([variant=secondary]) .md-button:not(.isActive):active{background-color:var(--button-secondary-pressed-bg-color,#b2b2b2);color:var(--button-secondary-text-color,#121212)}:host([variant=secondary]) .md-button:not(.isActive).disabled,:host([variant=secondary]) .md-button:not(.isActive):disabled{background-color:var(--button-secondary-disabled-bg-color,var(--button-disabled-bg-color,#dedede));border:1px solid var(--button-secondary-disabled-border-color);color:var(--button-secondary-disabled-text-color,var(--button-disabled-text-color,#b2b2b2))}:host([variant=secondary]) .md-button.isActive{background-color:var(--button-secondary-active-bg-color,#dedede);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-secondary-border-color)}:host([variant=secondary]) .md-button.isActive:hover{background-color:var(--button-secondary-active-hover-bg-color,#ccc);color:var(--button-secondary-text-color,#121212)}:host([variant=secondary]) .md-button.isActive:active{background-color:var(--button-secondary-active-pressed-bg-color,#b2b2b2);color:var(--button-secondary-text-color,#121212)}:host([variant=secondary]) .md-button.isActive.disabled,:host([variant=secondary]) .md-button.isActive:disabled{background-color:var(--button-secondary-disabled-bg-color,var(--button-disabled-bg-color,#dedede));border:1px solid var(--button-secondary-disabled-border-color);color:var(--button-secondary-disabled-text-color,var(--button-disabled-text-color,#b2b2b2))}:host([variant=red]) .md-button{background-color:var(--button-red-bg-color,#d4371c);color:var(--button-red-text-color,var(--button-primary-text-color,#f7f7f7))}:host([variant=red]) .md-button:hover{background-color:var(--button-red-hover-bg-color,#a12512)}:host([variant=red]) .md-button:active{background-color:var(--button-red-pressed-bg-color,#6e1d13)}:host([variant=red]) .md-button.disabled,:host([variant=red]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=green]) .md-button{background-color:var(--button-green-bg-color,#00853c);color:var(--button-green-text-color,var(--button-primary-text-color,#f7f7f7))}:host([variant=green]) .md-button:hover{background-color:var(--button-green-hover-bg-color,#03612c)}:host([variant=green]) .md-button:active{background-color:var(--button-green-pressed-bg-color,#08421f)}:host([variant=green]) .md-button.disabled,:host([variant=green]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=available]) .md-button{background-color:var(--button-available-bg-color,#edfaf4);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-available-border-color);font-size:var(--body-secondary-font-size,1rem);font-family:var(--brand-font-regular, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:400}:host([variant=available]) .md-button--32{border-radius:var(--button-state-selector-border-radius,1rem);padding:var(--button-state-selector-padding,var(--button-padding-32,.5rem 1rem .5625rem 1rem))}:host([variant=available]) .md-button--32::after{border-radius:calc(var(--button-state-selector-border-radius,1rem) + 2px)}:host([variant=available]) .md-button:hover{background-color:var(--button-available-hover-bg-color,#befade)}:host([variant=available]) .md-button:active{background-color:var(--button-available-pressed-bg-color,#befade)}:host([variant=available]) .md-button.disabled,:host([variant=available]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=unavailable]) .md-button{background-color:var(--button-unavailable-bg-color,#fff5f2);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-unavailable-border-color);border-radius:var(--button-state-selector-border-radius);font-size:var(--body-secondary-font-size,1rem);font-family:var(--brand-font-regular, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:400}:host([variant=unavailable]) .md-button--32{border-radius:var(--button-state-selector-border-radius,1rem);padding:var(--button-state-selector-padding,var(--button-padding-32,.5rem 1rem .5625rem 1rem))}:host([variant=unavailable]) .md-button--32::after{border-radius:calc(var(--button-state-selector-border-radius,1rem) + 2px)}:host([variant=unavailable]) .md-button:hover{background-color:var(--button-unavailable-hover-bg-color,#ffe8e3)}:host([variant=unavailable]) .md-button:active{background-color:var(--button-unavailable-pressed-bg-color,#ffe8e3)}:host([variant=unavailable]) .md-button.disabled,:host([variant=unavailable]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=idle]) .md-button{background-color:var(--button-idle-bg-color,#f7f7f7);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-idle-border-color);border-radius:var(--button-state-selector-border-radius);font-size:var(--body-secondary-font-size,1rem);font-family:var(--brand-font-regular, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:400}:host([variant=idle]) .md-button--32{border-radius:var(--button-state-selector-border-radius,1rem);padding:var(--button-state-selector-padding,var(--button-padding-32,.5rem 1rem .5625rem 1rem))}:host([variant=idle]) .md-button--32::after{border-radius:calc(var(--button-state-selector-border-radius,1rem) + 2px)}:host([variant=idle]) .md-button:hover{background-color:var(--button-idle-hover-bg-color,#ededed)}:host([variant=idle]) .md-button:active{background-color:var(--button-idle-pressed-bg-color,#ededed)}:host([variant=idle]) .md-button.disabled,:host([variant=idle]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=white]) .md-button{background-color:var(--button-white-bg-color,#fff);color:var(--button-white-text-color,#545454)}:host([variant=white]) .md-button:hover{background-color:var(--button-white-hover-bg-color,#ededed)}:host([variant=white]) .md-button:active{background-color:var(--button-white-pressed-bg-color,#dedede)}:host([variant=white]) .md-button--outline{box-shadow:0 0 0 1px var(--button-white-outline-color,#ccc);color:var(--button-white-outline-text-color,#545454)}:host([variant=inverted-white]) .md-button{background-color:var(--button-inverted-white-bg-color,#3b3b3b);color:var(--button-inverted-white-text-color,#fff)}:host([variant=inverted-white]) .md-button:hover{background-color:var(--button-inverted-white-hover-bg-color,#292929)}:host([variant=inverted-white]) .md-button:active{background-color:var(--button-inverted-white-pressed-bg-color,#1c1c1c)}:host([variant=inverted-white]) .md-button.disabled,:host([variant=inverted-white]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=inverted-white]) .md-button--outline{box-shadow:0 0 0 1px var(--button-inverted-white-outline-color,#b2b2b2);color:var(--button-inverted-white-outline-text-color,#b2b2b2)}:host([variant=engaged]) .md-button{background-color:var(--button-engaged-bg-color,#fff7e3);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-engaged-border-color);border-radius:var(--button-state-selector-border-radius);font-size:var(--body-secondary-font-size,1rem);font-family:var(--brand-font-regular, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:400}:host([variant=engaged]) .md-button--32{border-radius:var(--button-state-selector-border-radius,1rem);padding:var(--button-state-selector-padding,var(--button-padding-32,.5rem 1rem .5625rem 1rem))}:host([variant=engaged]) .md-button--32::after{border-radius:calc(var(--button-state-selector-border-radius,1rem) + 2px)}:host([variant=engaged]) .md-button:hover{background-color:var(--button-engaged-hover-bg-color,#ffecc2)}:host([variant=engaged]) .md-button:active{background-color:var(--button-engaged-pressed-bg-color,#ffd98c)}:host([variant=tab]) .md-button:not(.isActive){background-color:var(--button-ghost-bg-color,transparent);color:var(--button-ghost-text-color,var(--button-secondary-text-color))}:host([variant=tab]) .md-button:not(.isActive):hover{background-color:var(--button-ghost-hover-bg-color,var(--button-secondary-hover-bg-color))}:host([variant=tab]) .md-button:not(.isActive):active{background-color:var(--button-ghost-pressed-bg-color,var(--button-secondary-pressed-bg-color))}:host([variant=tab]) .md-button:not(.isActive).disabled,:host([variant=tab]) .md-button:not(.isActive):disabled{background-color:var(--button-ghost-disabled-bg-color,transparent);color:var(--button-ghost-disabled-text-color,var(--button-disabled-text-color))}:host([variant=tab]) .md-button.isActive{background-color:var(--button-ghost-active-bg-color);color:var(--button-ghost-active-text-color)}:host([variant=tab]) .md-button.isActive:hover{background-color:var(--button-ghost-active-hover-bg-color)}:host([variant=tab]) .md-button.isActive:active{background-color:var(--button-ghost-active-pressed-bg-color)}:host([variant=tab]) .md-button.isActive.disabled,:host([variant=tab]) .md-button.isActive:disabled{background-color:var(--button-ghost-active-disabled-bg-color);color:var(--button-ghost-active-disabled-text-color)}::slotted(*){display:flex}::slotted([slot=text]){align-self:end;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::slotted(:not(:first-child)){display:inline-block;margin-left:.5rem}::slotted(md-icon){line-height:normal}md-spinner{display:flex}md-spinner+::slotted(*){margin-left:.5rem}@media(forced-colors:active){:host .md-button:focus{outline:2px solid Highlight}:host .md-button:active{color:Highlight;outline:2px solid Highlight}:host .md-button.disabled,:host .md-button[disabled]{color:GrayText!important}:host .md-button--outline.disabled{color:GrayText!important}:host .md-button--outline:active:disabled,:host .md-button--outline:focus:disabled{outline:2px solid Highlight}}`,s=function(t,o,d,r){var a,n=arguments.length,e=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,d):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)e=Reflect.decorate(t,o,d,r);else for(var b=t.length-1;b>=0;b--)(a=t[b])&&(e=(n<3?a(e):n>3?a(o,d,e):a(o,d))||e);return n>3&&e&&Object.defineProperty(o,d,e),e};const l=["20","24","28","32","36","40","44","52","56","72","68","84","size-none",20,24,28,32,36,40,44,52,56,68,72,68,84],h=["button","input","a"],v=["button","reset","submit"],g=["button","checkbox","link","menuitem","menuitemcheckbox","menuitemradio","option","radio","switch","tab"],f=["primary","secondary","red","green","ghost","white","darkGrey","promotional","tab","available","unavailable","engaged","idle"],y=["blue","red","green","orange","yellow","mint","purple","pink","cyan","white","dark-gray","duck-egg","violet","color-none",""],k=["","off","polite","assertive"];var p;!function(t){let o=class extends b.LitElement{constructor(){super(...arguments),this._active=!1,this._tabIndex=0,this.ariaLabel="",this.ariaLabelledBy="",this.ariaLive="",this.ariaExpanded="",this.ariaHaspopup="false",this.ariaPressed="",this.circle=!1,this.color="",this.containerLarge=!1,this.disabled=!1,this.href="",this.id="",this.value="",this.keyboardKey="",this.label="",this.loading=!1,this.outline=!1,this.hasRemoveStyle=!1,this.size="32",this.tag="button",this.type="button",this.role="button",this.variant="secondary",this.width="",this.maxWidth="",this.activityType="",this.iconActive=!1,this.isActive=!1,this.renderWidth=()=>this.width?`width: ${this.width};`:i.nothing,this.renderMaxWidth=()=>this.maxWidth?`max-width: ${this.maxWidth};`:i.nothing,this.getStyles=()=>{if(this.width||this.maxWidth)return b.html`
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[7],{17:function(t,o,d){"use strict";d.r(o),d.d(o,"buttonSize",(function(){return l})),d.d(o,"buttonTag",(function(){return h})),d.d(o,"buttonType",(function(){return v})),d.d(o,"buttonRoles",(function(){return g})),d.d(o,"buttonVariant",(function(){return f})),d.d(o,"buttonColor",(function(){return y})),d.d(o,"buttonAriaLive",(function(){return k})),d.d(o,"Button",(function(){return p}));var r=d(59),a=(d(51),d(6)),n=d(36),e=d(5),b=d(0),i=d(2),c=d(4),m=d(3),u=b.css`[class|=md-button__container]{align-content:center;align-items:center;display:inline-flex;flex-flow:column nowrap;justify-content:center;width:116px}[class|=md-button__container][class$="--small"]{width:104px}:host .md-button{transition:background-color 150ms ease;border:none;border-radius:1.125rem;cursor:pointer;display:inline-flex;font-family:var(--brand-font-medium, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:550;font-size:1rem;line-height:normal;min-width:4.5rem;position:relative;text-align:center;text-decoration:none;align-items:center;justify-content:center}:host .md-button>*{font-size:inherit}:host .md-button .md-button__children{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:center;max-width:100%;flex:1}:host .md-button+.md-button{margin-left:.3125rem}:host .md-button.active-state.focus-state,:host .md-button.active-state:focus,:host .md-button:active.focus-state,:host .md-button:active:focus{box-shadow:none}:host .md-button.disabled,:host .md-button.md-button--disabled,:host .md-button[disabled]{box-shadow:none;cursor:default;pointer-events:none}:host .md-button.disabled:focus,:host .md-button.disabled:hover,:host .md-button.md-button--disabled:focus,:host .md-button.md-button--disabled:hover,:host .md-button[disabled]:focus,:host .md-button[disabled]:hover{box-shadow:none}:host .md-button{font-size:1rem;line-height:normal;padding:var(--button-padding-36,.5625rem 1.125rem .625rem 1.125rem);height:2.25rem}:host .md-button .md-prepend{margin-right:calc(2.25rem/4)}:host .md-button .md-append{margin-left:calc(2.25rem/4)}:host .md-button{border-radius:1.125rem}:host .md-button::after{border-radius:calc(1.125rem + 2px)}:host .md-button{background-color:#dedede;border-color:transparent;color:#000}:host .md-button.disabled,:host .md-button.md-button--disabled,:host .md-button[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button.disabled:focus,:host .md-button.disabled:hover,:host .md-button.md-button--disabled:focus,:host .md-button.md-button--disabled:hover,:host .md-button[disabled]:focus,:host .md-button[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button.focus-state,:host .md-button:focus{box-shadow:none;outline:0}:host .md-button:focus{background-color:#ccc;color:#000}:host .md-button:hover{background-color:#ccc;color:#000}:host .md-button.active,:host .md-button:active{background-color:#b2b2b2;color:#000}:host .md-button{background-color:var(--button-secondary-bg-color,#dedede);box-sizing:border-box;color:var(--button-secondary-text-color,#121212)}:host .md-button:hover{background-color:var(--button-secondary-hover-bg-color,#ccc);color:var(--button-secondary-text-color,#121212)}:host .md-button:active{background-color:var(--button-secondary-pressed-bg-color,#b2b2b2);color:var(--button-secondary-text-color,#121212)}:host .md-button.disabled,:host .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host .md-button.disabled:focus,:host .md-button:disabled:focus{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host .md-button::after{border-radius:calc(1.125rem + 2px);content:"";display:block;height:calc(100% + 2px*2);left:0;margin:-2px;position:absolute;top:0;width:calc(100% + 2px*2)}:host .md-button:focus::after{box-shadow:0 0 0 .125rem var(--button-focus-ring-color,#007aa3)}:host .md-button+.md-button__label{color:var(--md-primary-text-color,#121212);display:block;overflow:hidden;text-align:center;width:100%}:host .md-button--left{text-align:left;text-indent:.75rem}:host .md-button--right{padding-right:.75rem;text-align:right}:host .md-button--outline{box-shadow:0 0 0 1px #ccc}:host .md-button--outline:hover{box-shadow:none!important}:host .md-button--none{box-shadow:none;min-width:0}:host .md-button--none{background-color:rgba(0,0,0,0);border-color:transparent;color:inherit}:host .md-button--none.disabled,:host .md-button--none.md-button--disabled,:host .md-button--none[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--none.disabled:focus,:host .md-button--none.disabled:hover,:host .md-button--none.md-button--disabled:focus,:host .md-button--none.md-button--disabled:hover,:host .md-button--none[disabled]:focus,:host .md-button--none[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--none:focus{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--none:hover{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--none.active,:host .md-button--none:active{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--none{font-size:1rem;line-height:normal;padding:0;height:auto}:host .md-button--none .md-prepend{margin-right:calc(100%/4)}:host .md-button--none .md-append{margin-left:calc(100%/4)}:host .md-button--none{border-radius:0}:host .md-button--none::after{border-radius:0}:host .md-button--size-none{min-width:0}:host .md-button--size-none{font-size:1rem;line-height:normal;padding:0;height:auto}:host .md-button--size-none .md-prepend{margin-right:calc(100%/4)}:host .md-button--size-none .md-append{margin-left:calc(100%/4)}:host .md-button--size-none{border-radius:0}:host .md-button--size-none::after{border-radius:0}:host .md-button--24{font-size:var(--button-font-size-extra-small,.625rem);line-height:normal;padding:var(--button-padding-24,.25rem .75rem .3125rem .75rem);height:1.5rem}:host .md-button--24 .md-prepend{margin-right:calc(1.5rem/4)}:host .md-button--24 .md-append{margin-left:calc(1.5rem/4)}:host .md-button--24{border-radius:.75rem}:host .md-button--24::after{border-radius:calc(.75rem + 2px)}:host .md-button--28{font-size:var(--button-font-size-small,.75rem);line-height:normal;padding:var(--button-padding-28,.375rem .875rem .4375rem .875rem);height:1.75rem}:host .md-button--28 .md-prepend{margin-right:calc(1.75rem/4)}:host .md-button--28 .md-append{margin-left:calc(1.75rem/4)}:host .md-button--28{border-radius:.875rem}:host .md-button--28::after{border-radius:calc(.875rem + 2px)}:host .md-button--32{font-size:var(--button-font-size-medium,.875rem);line-height:normal;padding:var(--button-padding-32,.5rem 1rem .5625rem 1rem);height:2rem}:host .md-button--32 .md-prepend{margin-right:calc(2rem/4)}:host .md-button--32 .md-append{margin-left:calc(2rem/4)}:host .md-button--32{border-radius:1rem}:host .md-button--32::after{border-radius:calc(1rem + 2px)}:host .md-button--36{font-size:var(--button-font-size-medium,.875rem);line-height:normal;padding:var(--button-padding-36,.5625rem 1.125rem .625rem 1.125rem);height:2.25rem}:host .md-button--36 .md-prepend{margin-right:calc(2.25rem/4)}:host .md-button--36 .md-append{margin-left:calc(2.25rem/4)}:host .md-button--40{font-size:1rem;line-height:normal;padding:var(--button-padding-40,.6875rem 1.25rem .75rem 1.25rem);height:2.5rem}:host .md-button--40 .md-prepend{margin-right:calc(2.5rem/4)}:host .md-button--40 .md-append{margin-left:calc(2.5rem/4)}:host .md-button--40{border-radius:1.25rem}:host .md-button--40::after{border-radius:calc(1.25rem + 2px)}:host .md-button--52{font-size:1rem;line-height:normal;padding:var(--button-padding-52,.875rem 1.625rem .9375rem 1.625rem);height:3.25rem}:host .md-button--52 .md-prepend{margin-right:calc(3.25rem/4)}:host .md-button--52 .md-append{margin-left:calc(3.25rem/4)}:host .md-button--52{border-radius:1.625rem}:host .md-button--52::after{border-radius:calc(1.625rem + 2px)}:host .md-button--circle{padding:0;width:2.25rem;height:2.25rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle{border-radius:100%}:host .md-button--circle::after{border-radius:100%}:host .md-button--circle[class*="--none"]{width:auto;height:auto;min-width:0;min-height:0}:host .md-button--circle[class*="--none"]{background-color:rgba(0,0,0,0);border-color:transparent;color:inherit}:host .md-button--circle[class*="--none"].disabled,:host .md-button--circle[class*="--none"].md-button--disabled,:host .md-button--circle[class*="--none"][disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--circle[class*="--none"].disabled:focus,:host .md-button--circle[class*="--none"].disabled:hover,:host .md-button--circle[class*="--none"].md-button--disabled:focus,:host .md-button--circle[class*="--none"].md-button--disabled:hover,:host .md-button--circle[class*="--none"][disabled]:focus,:host .md-button--circle[class*="--none"][disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--circle[class*="--none"]:focus{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--circle[class*="--none"]:hover{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--circle[class*="--none"].active,:host .md-button--circle[class*="--none"]:active{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--circle[class*="--size-none"]{width:auto;height:auto;min-width:0;min-height:0}:host .md-button--circle[class*="--20"]{width:1.25rem;height:1.25rem;min-width:0;min-height:0;font-size:var(--button-font-size-extra-small,.5rem);line-height:var(--button-font-size-extra-small,.5rem)}:host .md-button--circle[class*="--24"]{width:1.5rem;height:1.5rem;min-width:0;min-height:0;font-size:var(--button-font-size-extra-small,.625rem);line-height:var(--button-font-size-extra-small,.625rem)}:host .md-button--circle[class*="--28"]{width:1.75rem;height:1.75rem;min-width:0;min-height:0;font-size:var(--button-font-size-small,.75rem);line-height:var(--button-font-size-small,.75rem)}:host .md-button--circle[class*="--32"]{width:2rem;height:2rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle[class*="--36"]{width:2.25rem;height:2.25rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle[class*="--40"]{width:2.5rem;height:2.5rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle[class*="--44"]{width:2.75rem;height:2.75rem;min-width:0;min-height:0;font-size:var(--button-font-size-medium,.875rem);line-height:var(--button-font-size-medium,.875rem)}:host .md-button--circle[class*="--52"]{width:3.25rem;height:3.25rem;min-width:0;min-height:0;font-size:1.375rem;line-height:1.375rem}:host .md-button--circle[class*="--56"]{width:3.5rem;height:3.5rem;min-width:0;min-height:0;font-size:1.5rem;line-height:1.5rem}:host .md-button--circle[class*="--68"]{width:4.25rem;height:4.25rem;min-width:0;min-height:0;font-size:1.75rem;line-height:1.75rem}:host .md-button--circle[class*="--72"]{width:4.5rem;height:4.5rem;min-width:0;min-height:0;font-size:2rem;line-height:2rem}:host .md-button--circle[class*="--84"]{width:5.25rem;height:5.25rem;min-width:0;min-height:0;font-size:2.5rem;line-height:2.5rem}:host .md-button--circle.icon{font-family:momentum-ui-icons}:host .md-button .md-loading{left:50%;position:absolute;transform:translateX(-50%)}:host .md-button--blue{background-color:var(--button-accent-bg-color,#007aa3);border-color:transparent;color:#fff}:host .md-button--blue.disabled,:host .md-button--blue.md-button--disabled,:host .md-button--blue[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--blue.disabled:focus,:host .md-button--blue.disabled:hover,:host .md-button--blue.md-button--disabled:focus,:host .md-button--blue.md-button--disabled:hover,:host .md-button--blue[disabled]:focus,:host .md-button--blue[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--blue.focus-state,:host .md-button--blue:focus{box-shadow:none;outline:0}:host .md-button--blue:focus{background-color:var(--button-accent-hover-bg-color,#005e7d);color:#fff}:host .md-button--blue:hover{background-color:var(--button-accent-hover-bg-color,#005e7d);color:#fff}:host .md-button--blue.active,:host .md-button--blue:active{background-color:var(--button-accent-pressed-bg-color,#064157);color:#fff}:host .md-button--blue.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:var(--button-primary-outline-color,#005e7d);box-shadow:0 0 0 1px var(--button-primary-outline-color,#005e7d)}:host .md-button--blue.md-button--outline.disabled,:host .md-button--blue.md-button--outline.md-button--disabled,:host .md-button--blue.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--blue.md-button--outline.disabled:focus,:host .md-button--blue.md-button--outline.disabled:hover,:host .md-button--blue.md-button--outline.md-button--disabled:focus,:host .md-button--blue.md-button--outline.md-button--disabled:hover,:host .md-button--blue.md-button--outline[disabled]:focus,:host .md-button--blue.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--blue.md-button--outline.focus-state,:host .md-button--blue.md-button--outline:focus{box-shadow:none;outline:0}:host .md-button--blue.md-button--outline:focus{background-color:var(--button-accent-hover-bg-color,#005e7d);color:#fff}:host .md-button--blue.md-button--outline:hover{background-color:var(--button-accent-hover-bg-color,#005e7d);color:#fff}:host .md-button--blue.md-button--outline.active,:host .md-button--blue.md-button--outline:active{background-color:var(--button-accent-pressed-bg-color,#064157);color:#fff}:host .md-button--red{background-color:#f7644a;border-color:transparent;color:#fff}:host .md-button--red.disabled,:host .md-button--red.md-button--disabled,:host .md-button--red[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--red.disabled:focus,:host .md-button--red.disabled:hover,:host .md-button--red.md-button--disabled:focus,:host .md-button--red.md-button--disabled:hover,:host .md-button--red[disabled]:focus,:host .md-button--red[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--red:focus{background-color:#d4371c;color:#fff}:host .md-button--red:hover{background-color:#d4371c;color:#fff}:host .md-button--red.active,:host .md-button--red:active{background-color:#a12512;color:#fff}:host .md-button--red.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#f7644a;box-shadow:0 0 0 1px #f7644a}:host .md-button--red.md-button--outline.disabled,:host .md-button--red.md-button--outline.md-button--disabled,:host .md-button--red.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--red.md-button--outline.disabled:focus,:host .md-button--red.md-button--outline.disabled:hover,:host .md-button--red.md-button--outline.md-button--disabled:focus,:host .md-button--red.md-button--outline.md-button--disabled:hover,:host .md-button--red.md-button--outline[disabled]:focus,:host .md-button--red.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--red.md-button--outline:focus{background-color:#d4371c;color:#fff}:host .md-button--red.md-button--outline:hover{background-color:#d4371c;color:#fff}:host .md-button--red.md-button--outline.active,:host .md-button--red.md-button--outline:active{background-color:#a12512;color:#fff}:host .md-button--green{background-color:#00ab50;border-color:transparent;color:#fff}:host .md-button--green.disabled,:host .md-button--green.md-button--disabled,:host .md-button--green[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--green.disabled:focus,:host .md-button--green.disabled:hover,:host .md-button--green.md-button--disabled:focus,:host .md-button--green.md-button--disabled:hover,:host .md-button--green[disabled]:focus,:host .md-button--green[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--green:focus{background-color:#00853c;color:#fff}:host .md-button--green:hover{background-color:#00853c;color:#fff}:host .md-button--green.active,:host .md-button--green:active{background-color:#03612c;color:#fff}:host .md-button--green.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#00ab50;box-shadow:0 0 0 1px #00ab50}:host .md-button--green.md-button--outline.disabled,:host .md-button--green.md-button--outline.md-button--disabled,:host .md-button--green.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--green.md-button--outline.disabled:focus,:host .md-button--green.md-button--outline.disabled:hover,:host .md-button--green.md-button--outline.md-button--disabled:focus,:host .md-button--green.md-button--outline.md-button--disabled:hover,:host .md-button--green.md-button--outline[disabled]:focus,:host .md-button--green.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--green.md-button--outline:focus{background-color:#00853c;color:#fff}:host .md-button--green.md-button--outline:hover{background-color:#00853c;color:#fff}:host .md-button--green.md-button--outline.active,:host .md-button--green.md-button--outline:active{background-color:#03612c;color:#fff}:host .md-button--orange{background-color:#f26b1d;border-color:transparent;color:#fff}:host .md-button--orange.disabled,:host .md-button--orange.md-button--disabled,:host .md-button--orange[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--orange.disabled:focus,:host .md-button--orange.disabled:hover,:host .md-button--orange.md-button--disabled:focus,:host .md-button--orange.md-button--disabled:hover,:host .md-button--orange[disabled]:focus,:host .md-button--orange[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--orange:focus{background-color:#c74f0e;color:#fff}:host .md-button--orange:hover{background-color:#c74f0e;color:#fff}:host .md-button--orange.active,:host .md-button--orange:active{background-color:#914017;color:#fff}:host .md-button--orange.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#f26b1d;box-shadow:0 0 0 1px #f26b1d}:host .md-button--orange.md-button--outline.disabled,:host .md-button--orange.md-button--outline.md-button--disabled,:host .md-button--orange.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--orange.md-button--outline.disabled:focus,:host .md-button--orange.md-button--outline.disabled:hover,:host .md-button--orange.md-button--outline.md-button--disabled:focus,:host .md-button--orange.md-button--outline.md-button--disabled:hover,:host .md-button--orange.md-button--outline[disabled]:focus,:host .md-button--orange.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--orange.md-button--outline:focus{background-color:#c74f0e;color:#fff}:host .md-button--orange.md-button--outline:hover{background-color:#c74f0e;color:#fff}:host .md-button--orange.md-button--outline.active,:host .md-button--orange.md-button--outline:active{background-color:#914017;color:#fff}:host .md-button--yellow{background-color:#d97f00;border-color:transparent;color:#fff}:host .md-button--yellow.disabled,:host .md-button--yellow.md-button--disabled,:host .md-button--yellow[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--yellow.disabled:focus,:host .md-button--yellow.disabled:hover,:host .md-button--yellow.md-button--disabled:focus,:host .md-button--yellow.md-button--disabled:hover,:host .md-button--yellow[disabled]:focus,:host .md-button--yellow[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--yellow:focus{background-color:#a85f00;color:#fff}:host .md-button--yellow:hover{background-color:#a85f00;color:#fff}:host .md-button--yellow.active,:host .md-button--yellow:active{background-color:#7d4705;color:#fff}:host .md-button--yellow.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#d97f00;box-shadow:0 0 0 1px #d97f00}:host .md-button--yellow.md-button--outline.disabled,:host .md-button--yellow.md-button--outline.md-button--disabled,:host .md-button--yellow.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--yellow.md-button--outline.disabled:focus,:host .md-button--yellow.md-button--outline.disabled:hover,:host .md-button--yellow.md-button--outline.md-button--disabled:focus,:host .md-button--yellow.md-button--outline.md-button--disabled:hover,:host .md-button--yellow.md-button--outline[disabled]:focus,:host .md-button--yellow.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--yellow.md-button--outline:focus{background-color:#a85f00;color:#fff}:host .md-button--yellow.md-button--outline:hover{background-color:#a85f00;color:#fff}:host .md-button--yellow.md-button--outline.active,:host .md-button--yellow.md-button--outline:active{background-color:#7d4705;color:#fff}:host .md-button--mint{background-color:#16a693;border-color:transparent;color:#fff}:host .md-button--mint.disabled,:host .md-button--mint.md-button--disabled,:host .md-button--mint[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--mint.disabled:focus,:host .md-button--mint.disabled:hover,:host .md-button--mint.md-button--disabled:focus,:host .md-button--mint.md-button--disabled:hover,:host .md-button--mint[disabled]:focus,:host .md-button--mint[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--mint:focus{background-color:#148579;color:#fff}:host .md-button--mint:hover{background-color:#148579;color:#fff}:host .md-button--mint.active,:host .md-button--mint:active{background-color:#12615a;color:#fff}:host .md-button--mint.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#16a693;box-shadow:0 0 0 1px #16a693}:host .md-button--mint.md-button--outline.disabled,:host .md-button--mint.md-button--outline.md-button--disabled,:host .md-button--mint.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--mint.md-button--outline.disabled:focus,:host .md-button--mint.md-button--outline.disabled:hover,:host .md-button--mint.md-button--outline.md-button--disabled:focus,:host .md-button--mint.md-button--outline.md-button--disabled:hover,:host .md-button--mint.md-button--outline[disabled]:focus,:host .md-button--mint.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--mint.md-button--outline:focus{background-color:#148579;color:#fff}:host .md-button--mint.md-button--outline:hover{background-color:#148579;color:#fff}:host .md-button--mint.md-button--outline.active,:host .md-button--mint.md-button--outline:active{background-color:#12615a;color:#fff}:host .md-button--purple{background-color:#e060de;border-color:transparent;color:#fff}:host .md-button--purple.disabled,:host .md-button--purple.md-button--disabled,:host .md-button--purple[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--purple.disabled:focus,:host .md-button--purple.disabled:hover,:host .md-button--purple.md-button--disabled:focus,:host .md-button--purple.md-button--disabled:hover,:host .md-button--purple[disabled]:focus,:host .md-button--purple[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--purple:focus{background-color:#c233c4;color:#fff}:host .md-button--purple:hover{background-color:#c233c4;color:#fff}:host .md-button--purple.active,:host .md-button--purple:active{background-color:#932099;color:#fff}:host .md-button--purple.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#e060de;box-shadow:0 0 0 1px #e060de}:host .md-button--purple.md-button--outline.disabled,:host .md-button--purple.md-button--outline.md-button--disabled,:host .md-button--purple.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--purple.md-button--outline.disabled:focus,:host .md-button--purple.md-button--outline.disabled:hover,:host .md-button--purple.md-button--outline.md-button--disabled:focus,:host .md-button--purple.md-button--outline.md-button--disabled:hover,:host .md-button--purple.md-button--outline[disabled]:focus,:host .md-button--purple.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--purple.md-button--outline:focus{background-color:#c233c4;color:#fff}:host .md-button--purple.md-button--outline:hover{background-color:#c233c4;color:#fff}:host .md-button--purple.md-button--outline.active,:host .md-button--purple.md-button--outline:active{background-color:#932099;color:#fff}:host .md-button--pink{background-color:#f0677e;border-color:transparent;color:#fff}:host .md-button--pink.disabled,:host .md-button--pink.md-button--disabled,:host .md-button--pink[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--pink.disabled:focus,:host .md-button--pink.disabled:hover,:host .md-button--pink.md-button--disabled:focus,:host .md-button--pink.md-button--disabled:hover,:host .md-button--pink[disabled]:focus,:host .md-button--pink[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--pink:focus{background-color:#d43b52;color:#fff}:host .md-button--pink:hover{background-color:#d43b52;color:#fff}:host .md-button--pink.active,:host .md-button--pink:active{background-color:#a12a3a;color:#fff}:host .md-button--pink.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#f0677e;box-shadow:0 0 0 1px #f0677e}:host .md-button--pink.md-button--outline.disabled,:host .md-button--pink.md-button--outline.md-button--disabled,:host .md-button--pink.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--pink.md-button--outline.disabled:focus,:host .md-button--pink.md-button--outline.disabled:hover,:host .md-button--pink.md-button--outline.md-button--disabled:focus,:host .md-button--pink.md-button--outline.md-button--disabled:hover,:host .md-button--pink.md-button--outline[disabled]:focus,:host .md-button--pink.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--pink.md-button--outline:focus{background-color:#d43b52;color:#fff}:host .md-button--pink.md-button--outline:hover{background-color:#d43b52;color:#fff}:host .md-button--pink.md-button--outline.active,:host .md-button--pink.md-button--outline:active{background-color:#a12a3a;color:#fff}:host .md-button--cyan{background-color:#00a3b5;border-color:transparent;color:#fff}:host .md-button--cyan.disabled,:host .md-button--cyan.md-button--disabled,:host .md-button--cyan[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--cyan.disabled:focus,:host .md-button--cyan.disabled:hover,:host .md-button--cyan.md-button--disabled:focus,:host .md-button--cyan.md-button--disabled:hover,:host .md-button--cyan[disabled]:focus,:host .md-button--cyan[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--cyan:focus{background-color:#008094;color:#fff}:host .md-button--cyan:hover{background-color:#008094;color:#fff}:host .md-button--cyan.active,:host .md-button--cyan:active{background-color:#066070;color:#fff}:host .md-button--cyan.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#00a3b5;box-shadow:0 0 0 1px #00a3b5}:host .md-button--cyan.md-button--outline.disabled,:host .md-button--cyan.md-button--outline.md-button--disabled,:host .md-button--cyan.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--cyan.md-button--outline.disabled:focus,:host .md-button--cyan.md-button--outline.disabled:hover,:host .md-button--cyan.md-button--outline.md-button--disabled:focus,:host .md-button--cyan.md-button--outline.md-button--disabled:hover,:host .md-button--cyan.md-button--outline[disabled]:focus,:host .md-button--cyan.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--cyan.md-button--outline:focus{background-color:#008094;color:#fff}:host .md-button--cyan.md-button--outline:hover{background-color:#008094;color:#fff}:host .md-button--cyan.md-button--outline.active,:host .md-button--cyan.md-button--outline:active{background-color:#066070;color:#fff}:host .md-button--white{background-color:#fff;border-color:transparent;color:#000}:host .md-button--white.disabled,:host .md-button--white.md-button--disabled,:host .md-button--white[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--white.disabled:focus,:host .md-button--white.disabled:hover,:host .md-button--white.md-button--disabled:focus,:host .md-button--white.md-button--disabled:hover,:host .md-button--white[disabled]:focus,:host .md-button--white[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--white:focus{background-color:#ededed;color:#000}:host .md-button--white:hover{background-color:#ededed;color:#000}:host .md-button--white.active,:host .md-button--white:active{background-color:#ccc;color:#000}:host .md-button--white.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:var(--button-inverted-white-hover-bg-color,#292929);box-shadow:0 0 0 1px #ccc}:host .md-button--white.md-button--outline.disabled,:host .md-button--white.md-button--outline.md-button--disabled,:host .md-button--white.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--white.md-button--outline.disabled:focus,:host .md-button--white.md-button--outline.disabled:hover,:host .md-button--white.md-button--outline.md-button--disabled:focus,:host .md-button--white.md-button--outline.md-button--disabled:hover,:host .md-button--white.md-button--outline[disabled]:focus,:host .md-button--white.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--white.md-button--outline:focus{background-color:#ededed;color:#3b3b3b}:host .md-button--white.md-button--outline:hover{background-color:#ededed;color:#3b3b3b}:host .md-button--white.md-button--outline.active,:host .md-button--white.md-button--outline:active{background-color:#ccc;color:#3b3b3b}:host .md-button--dark-gray{background-color:var(--button-inverted-white-hover-bg-color,#292929);border-color:transparent;color:#fff}:host .md-button--dark-gray.disabled,:host .md-button--dark-gray.md-button--disabled,:host .md-button--dark-gray[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--dark-gray.disabled:focus,:host .md-button--dark-gray.disabled:hover,:host .md-button--dark-gray.md-button--disabled:focus,:host .md-button--dark-gray.md-button--disabled:hover,:host .md-button--dark-gray[disabled]:focus,:host .md-button--dark-gray[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--dark-gray:focus{background-color:#3b3b3b;color:#fff}:host .md-button--dark-gray:hover{background-color:#3b3b3b;color:#fff}:host .md-button--dark-gray.active,:host .md-button--dark-gray:active{background-color:#545454;color:#fff}:host .md-button--dark-gray.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:var(--button-inverted-white-hover-bg-color,#292929);box-shadow:0 0 0 1px var(--button-inverted-white-hover-bg-color,#292929)}:host .md-button--dark-gray.md-button--outline.disabled,:host .md-button--dark-gray.md-button--outline.md-button--disabled,:host .md-button--dark-gray.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--dark-gray.md-button--outline.disabled:focus,:host .md-button--dark-gray.md-button--outline.disabled:hover,:host .md-button--dark-gray.md-button--outline.md-button--disabled:focus,:host .md-button--dark-gray.md-button--outline.md-button--disabled:hover,:host .md-button--dark-gray.md-button--outline[disabled]:focus,:host .md-button--dark-gray.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--dark-gray.md-button--outline:focus{background-color:#3b3b3b;color:#fff}:host .md-button--dark-gray.md-button--outline:hover{background-color:#3b3b3b;color:#fff}:host .md-button--dark-gray.md-button--outline.active,:host .md-button--dark-gray.md-button--outline:active{background-color:#545454;color:#fff}:host .md-button--duck-egg{background-color:#949494;border-color:transparent;color:#fff}:host .md-button--duck-egg.disabled,:host .md-button--duck-egg.md-button--disabled,:host .md-button--duck-egg[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--duck-egg.disabled:focus,:host .md-button--duck-egg.disabled:hover,:host .md-button--duck-egg.md-button--disabled:focus,:host .md-button--duck-egg.md-button--disabled:hover,:host .md-button--duck-egg[disabled]:focus,:host .md-button--duck-egg[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--duck-egg:focus{background-color:#707070;color:#fff}:host .md-button--duck-egg:hover{background-color:#707070;color:#fff}:host .md-button--duck-egg.active,:host .md-button--duck-egg:active{background-color:#545454;color:#fff}:host .md-button--duck-egg.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#949494;box-shadow:0 0 0 1px #949494}:host .md-button--duck-egg.md-button--outline.disabled,:host .md-button--duck-egg.md-button--outline.md-button--disabled,:host .md-button--duck-egg.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--duck-egg.md-button--outline.disabled:focus,:host .md-button--duck-egg.md-button--outline.disabled:hover,:host .md-button--duck-egg.md-button--outline.md-button--disabled:focus,:host .md-button--duck-egg.md-button--outline.md-button--disabled:hover,:host .md-button--duck-egg.md-button--outline[disabled]:focus,:host .md-button--duck-egg.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--duck-egg.md-button--outline:focus{background-color:#707070;color:#fff}:host .md-button--duck-egg.md-button--outline:hover{background-color:#707070;color:#fff}:host .md-button--duck-egg.md-button--outline.active,:host .md-button--duck-egg.md-button--outline:active{background-color:#545454;color:#fff}:host .md-button--violet{background-color:#a87ff1;border-color:transparent;color:#fff}:host .md-button--violet.disabled,:host .md-button--violet.md-button--disabled,:host .md-button--violet[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--violet.disabled:focus,:host .md-button--violet.disabled:hover,:host .md-button--violet.md-button--disabled:focus,:host .md-button--violet.md-button--disabled:hover,:host .md-button--violet[disabled]:focus,:host .md-button--violet[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--violet:focus{background-color:#875ae1;color:#fff}:host .md-button--violet:hover{background-color:#875ae1;color:#fff}:host .md-button--violet.active,:host .md-button--violet:active{background-color:#643abd;color:#fff}:host .md-button--violet.md-button--outline{background-color:rgba(0,0,0,0);border-color:transparent;color:#a87ff1;box-shadow:0 0 0 1px #a87ff1}:host .md-button--violet.md-button--outline.disabled,:host .md-button--violet.md-button--outline.md-button--disabled,:host .md-button--violet.md-button--outline[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--violet.md-button--outline.disabled:focus,:host .md-button--violet.md-button--outline.disabled:hover,:host .md-button--violet.md-button--outline.md-button--disabled:focus,:host .md-button--violet.md-button--outline.md-button--disabled:hover,:host .md-button--violet.md-button--outline[disabled]:focus,:host .md-button--violet.md-button--outline[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--violet.md-button--outline:focus{background-color:#875ae1;color:#fff}:host .md-button--violet.md-button--outline:hover{background-color:#875ae1;color:#fff}:host .md-button--violet.md-button--outline.active,:host .md-button--violet.md-button--outline:active{background-color:#643abd;color:#fff}:host .md-button--link{color:#007aa3}:host .md-button--link{background-color:rgba(0,0,0,0);border-color:transparent;color:#fff}:host .md-button--link.disabled,:host .md-button--link.md-button--disabled,:host .md-button--link[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--link.disabled:focus,:host .md-button--link.disabled:hover,:host .md-button--link.md-button--disabled:focus,:host .md-button--link.md-button--disabled:hover,:host .md-button--link[disabled]:focus,:host .md-button--link[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--link:focus{background-color:#ccc;color:#fff}:host .md-button--link:hover{background-color:#ccc;color:#fff}:host .md-button--link.active,:host .md-button--link:active{background-color:#b2b2b2;color:#fff}:host .md-button--color-none{background-color:rgba(0,0,0,0);border-color:transparent;color:inherit}:host .md-button--color-none.disabled,:host .md-button--color-none.md-button--disabled,:host .md-button--color-none[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button--color-none.disabled:focus,:host .md-button--color-none.disabled:hover,:host .md-button--color-none.md-button--disabled:focus,:host .md-button--color-none.md-button--disabled:hover,:host .md-button--color-none[disabled]:focus,:host .md-button--color-none[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button--color-none:focus{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--color-none:hover{background-color:rgba(0,0,0,0);color:inherit}:host .md-button--color-none.active,:host .md-button--color-none:active{background-color:rgba(0,0,0,0);color:inherit}:host .md-button[class*=md-button--icon] .md-icon{fill:inherit}:host .md-button.md-button--icon{min-width:0}:host .md-button.md-button--icon{background-color:rgba(0,0,0,0);border-color:transparent;color:inherit}:host .md-button.md-button--icon.disabled,:host .md-button.md-button--icon.md-button--disabled,:host .md-button.md-button--icon[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,.04)}:host .md-button.md-button--icon.disabled:focus,:host .md-button.md-button--icon.disabled:hover,:host .md-button.md-button--icon.md-button--disabled:focus,:host .md-button.md-button--icon.md-button--disabled:hover,:host .md-button.md-button--icon[disabled]:focus,:host .md-button.md-button--icon[disabled]:hover{background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button.md-button--icon:focus{background-color:rgba(0,0,0,0);color:inherit}:host .md-button.md-button--icon:hover{background-color:rgba(0,0,0,0);color:inherit}:host .md-button.md-button--icon.active,:host .md-button.md-button--icon:active{background-color:rgba(0,0,0,0);color:inherit}:host .md-button.md-button--icon{color:#545454;fill:#545454}:host .md-button.md-button--icon.disabled,:host .md-button.md-button--icon.md-button--disabled,:host .md-button.md-button--icon[disabled]{color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2);background-color:rgba(0,0,0,0)}:host .md-button.md-button--icon.disabled:focus,:host .md-button.md-button--icon.disabled:hover,:host .md-button.md-button--icon.md-button--disabled:focus,:host .md-button.md-button--icon.md-button--disabled:hover,:host .md-button.md-button--icon[disabled]:focus,:host .md-button.md-button--icon[disabled]:hover{background-color:rgba(0,0,0,0);color:rgba(0,0,0,.2);fill:rgba(0,0,0,.2)}:host .md-button.md-button--icon.hover-state,:host .md-button.md-button--icon:hover{color:#007aa3;fill:#007aa3}:host .md-button.md-button--icon.active-state,:host .md-button.md-button--icon:active{color:#005e7d;fill:#005e7d}:host .md-button.md-button--icon{font-size:1rem;line-height:normal;padding:0;height:auto}:host .md-button.md-button--icon .md-prepend{margin-right:calc(100%/4)}:host .md-button.md-button--icon .md-append{margin-left:calc(100%/4)}:host .md-button.md-button--icon{border-radius:0}:host .md-button.md-button--icon::after{border-radius:0}:host .md-button.md-button--icon.md-button--icon-white{color:#fff;fill:#fff}:host .md-button.md-button--icon.md-button--icon-white.disabled,:host .md-button.md-button--icon.md-button--icon-white.md-button--disabled,:host .md-button.md-button--icon.md-button--icon-white[disabled]{color:rgba(255,255,255,.2);fill:rgba(255,255,255,.2);background-color:rgba(0,0,0,0)}:host .md-button.md-button--icon.md-button--icon-white.disabled:focus,:host .md-button.md-button--icon.md-button--icon-white.disabled:hover,:host .md-button.md-button--icon.md-button--icon-white.md-button--disabled:focus,:host .md-button.md-button--icon.md-button--icon-white.md-button--disabled:hover,:host .md-button.md-button--icon.md-button--icon-white[disabled]:focus,:host .md-button.md-button--icon.md-button--icon-white[disabled]:hover{background-color:rgba(0,0,0,0);color:rgba(255,255,255,.2);fill:rgba(255,255,255,.2)}:host .md-button.md-button--icon.md-button--icon-white.hover-state,:host .md-button.md-button--icon.md-button--icon-white:hover{color:rgba(255,255,255,.92);fill:rgba(255,255,255,.92)}:host .md-button.md-button--icon.md-button--icon-white.active-state,:host .md-button.md-button--icon.md-button--icon-white:active{color:rgba(255,255,255,.84);fill:rgba(255,255,255,.84)}:host .md-button.md-button--onlyicon.disabled,:host .md-button.md-button--onlyicon:disabled{background-color:rgba(0,0,0,0)!important}:host([type=reset]){appearance:none!important}:host([type=submit]){appearance:none!important}:host([variant=primary]) .md-button{background-color:var(--button-primary-bg-color,#007aa3);color:var(--button-primary-text-color,#f7f7f7)}:host([variant=primary]) .md-button:hover{background-color:var(--button-primary-hover-bg-color,#005e7d)}:host([variant=primary]) .md-button:active{background-color:var(--button-primary-pressed-bg-color,#064157)}:host([variant=primary]) .md-button.disabled,:host([variant=primary]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=promotional]) .md-button{background:var(--button-promotional-bg-color,#007aa3);color:var(--button-promotional-text-color,var(--button-primary-text-color,#f7f7f7))}:host([variant=promotional]) .md-button:hover{background:var(--button-promotional-hover-bg-color,#005e7d)}:host([variant=promotional]) .md-button:active{background:var(--button-promotional-pressed-bg-color,#064157)}:host([variant=promotional]) .md-button.disabled,:host([variant=promotional]) .md-button:disabled{background:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=ghost]) .md-button{background-color:var(--button-ghost-bg-color,transparent);color:var(--button-ghost-text-color,var(--button-secondary-text-color));border:unset}:host([variant=ghost]) .md-button:hover{background-color:var(--button-ghost-hover-bg-color,var(--button-secondary-hover-bg-color))}:host([variant=ghost]) .md-button:active{background-color:var(--button-ghost-pressed-bg-color,var(--button-secondary-pressed-bg-color))}:host([variant=ghost]) .md-button.disabled,:host([variant=ghost]) .md-button:disabled{background-color:var(--button-ghost-disabled-bg-color,transparent);color:var(--button-ghost-disabled-text-color,var(--button-disabled-text-color))}:host([variant=secondary]) .md-button:not(.isActive){background-color:var(--button-secondary-bg-color,#dedede);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-secondary-border-color)}:host([variant=secondary]) .md-button:not(.isActive):hover{background-color:var(--button-secondary-hover-bg-color,#ccc);color:var(--button-secondary-text-color,#121212)}:host([variant=secondary]) .md-button:not(.isActive):active{background-color:var(--button-secondary-pressed-bg-color,#b2b2b2);color:var(--button-secondary-text-color,#121212)}:host([variant=secondary]) .md-button:not(.isActive).disabled,:host([variant=secondary]) .md-button:not(.isActive):disabled{background-color:var(--button-secondary-disabled-bg-color,var(--button-disabled-bg-color,#dedede));border:1px solid var(--button-secondary-disabled-border-color);color:var(--button-secondary-disabled-text-color,var(--button-disabled-text-color,#b2b2b2))}:host([variant=secondary]) .md-button.isActive{background-color:var(--button-secondary-active-bg-color,#dedede);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-secondary-border-color)}:host([variant=secondary]) .md-button.isActive:hover{background-color:var(--button-secondary-active-hover-bg-color,#ccc);color:var(--button-secondary-text-color,#121212)}:host([variant=secondary]) .md-button.isActive:active{background-color:var(--button-secondary-active-pressed-bg-color,#b2b2b2);color:var(--button-secondary-text-color,#121212)}:host([variant=secondary]) .md-button.isActive.disabled,:host([variant=secondary]) .md-button.isActive:disabled{background-color:var(--button-secondary-disabled-bg-color,var(--button-disabled-bg-color,#dedede));border:1px solid var(--button-secondary-disabled-border-color);color:var(--button-secondary-disabled-text-color,var(--button-disabled-text-color,#b2b2b2))}:host([variant=red]) .md-button{background-color:var(--button-red-bg-color,#d4371c);color:var(--button-red-text-color,var(--button-primary-text-color,#f7f7f7))}:host([variant=red]) .md-button:hover{background-color:var(--button-red-hover-bg-color,#a12512)}:host([variant=red]) .md-button:active{background-color:var(--button-red-pressed-bg-color,#6e1d13)}:host([variant=red]) .md-button.disabled,:host([variant=red]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=green]) .md-button{background-color:var(--button-green-bg-color,#00853c);color:var(--button-green-text-color,var(--button-primary-text-color,#f7f7f7))}:host([variant=green]) .md-button:hover{background-color:var(--button-green-hover-bg-color,#03612c)}:host([variant=green]) .md-button:active{background-color:var(--button-green-pressed-bg-color,#08421f)}:host([variant=green]) .md-button.disabled,:host([variant=green]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=available]) .md-button{background-color:var(--button-available-bg-color,#edfaf4);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-available-border-color);font-size:var(--body-secondary-font-size,1rem);font-family:var(--brand-font-regular, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:400}:host([variant=available]) .md-button--32{border-radius:var(--button-state-selector-border-radius,1rem);padding:var(--button-state-selector-padding,.5rem .625rem .5rem .625rem)}:host([variant=available]) .md-button--32::after{border-radius:calc(var(--button-state-selector-border-radius,1rem) + 2px)}:host([variant=available]) .md-button:hover{background-color:var(--button-available-hover-bg-color,#befade)}:host([variant=available]) .md-button:active{background-color:var(--button-available-pressed-bg-color,#befade)}:host([variant=available]) .md-button.disabled,:host([variant=available]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=unavailable]) .md-button{background-color:var(--button-unavailable-bg-color,#fff5f2);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-unavailable-border-color);border-radius:var(--button-state-selector-border-radius);font-size:var(--body-secondary-font-size,1rem);font-family:var(--brand-font-regular, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:400}:host([variant=unavailable]) .md-button--32{border-radius:var(--button-state-selector-border-radius,1rem);padding:var(--button-state-selector-padding,.5rem .625rem .5rem .625rem)}:host([variant=unavailable]) .md-button--32::after{border-radius:calc(var(--button-state-selector-border-radius,1rem) + 2px)}:host([variant=unavailable]) .md-button:hover{background-color:var(--button-unavailable-hover-bg-color,#ffe8e3)}:host([variant=unavailable]) .md-button:active{background-color:var(--button-unavailable-pressed-bg-color,#ffe8e3)}:host([variant=unavailable]) .md-button.disabled,:host([variant=unavailable]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=idle]) .md-button{background-color:var(--button-idle-bg-color,#f7f7f7);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-idle-border-color);border-radius:var(--button-state-selector-border-radius);font-size:var(--body-secondary-font-size,1rem);font-family:var(--brand-font-regular, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:400}:host([variant=idle]) .md-button--32{border-radius:var(--button-state-selector-border-radius,1rem);padding:var(--button-state-selector-padding,.5rem .625rem .5rem .625rem)}:host([variant=idle]) .md-button--32::after{border-radius:calc(var(--button-state-selector-border-radius,1rem) + 2px)}:host([variant=idle]) .md-button:hover{background-color:var(--button-idle-hover-bg-color,#ededed)}:host([variant=idle]) .md-button:active{background-color:var(--button-idle-pressed-bg-color,#ededed)}:host([variant=idle]) .md-button.disabled,:host([variant=idle]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=white]) .md-button{background-color:var(--button-white-bg-color,#fff);color:var(--button-white-text-color,#545454)}:host([variant=white]) .md-button:hover{background-color:var(--button-white-hover-bg-color,#ededed)}:host([variant=white]) .md-button:active{background-color:var(--button-white-pressed-bg-color,#dedede)}:host([variant=white]) .md-button--outline{box-shadow:0 0 0 1px var(--button-white-outline-color,#ccc);color:var(--button-white-outline-text-color,#545454)}:host([variant=inverted-white]) .md-button{background-color:var(--button-inverted-white-bg-color,#3b3b3b);color:var(--button-inverted-white-text-color,#fff)}:host([variant=inverted-white]) .md-button:hover{background-color:var(--button-inverted-white-hover-bg-color,#292929)}:host([variant=inverted-white]) .md-button:active{background-color:var(--button-inverted-white-pressed-bg-color,#1c1c1c)}:host([variant=inverted-white]) .md-button.disabled,:host([variant=inverted-white]) .md-button:disabled{background-color:var(--button-disabled-bg-color,#dedede);color:var(--button-disabled-text-color,#b2b2b2)}:host([variant=inverted-white]) .md-button--outline{box-shadow:0 0 0 1px var(--button-inverted-white-outline-color,#b2b2b2);color:var(--button-inverted-white-outline-text-color,#b2b2b2)}:host([variant=engaged]) .md-button{background-color:var(--button-engaged-bg-color,#fff7e3);color:var(--button-secondary-text-color,#121212);border:1px solid var(--button-engaged-border-color);border-radius:var(--button-state-selector-border-radius);font-size:var(--body-secondary-font-size,1rem);font-family:var(--brand-font-regular, var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif));font-weight:400}:host([variant=engaged]) .md-button--32{border-radius:var(--button-state-selector-border-radius,1rem);padding:var(--button-state-selector-padding,var(--button-padding-32,.5rem 1rem .5625rem 1rem))}:host([variant=engaged]) .md-button--32::after{border-radius:calc(var(--button-state-selector-border-radius,1rem) + 2px)}:host([variant=engaged]) .md-button:hover{background-color:var(--button-engaged-hover-bg-color,#ffecc2)}:host([variant=engaged]) .md-button:active{background-color:var(--button-engaged-pressed-bg-color,#ffd98c)}:host([variant=tab]) .md-button:not(.isActive){background-color:var(--button-ghost-bg-color,transparent);color:var(--button-ghost-text-color,var(--button-secondary-text-color))}:host([variant=tab]) .md-button:not(.isActive):hover{background-color:var(--button-ghost-hover-bg-color,var(--button-secondary-hover-bg-color))}:host([variant=tab]) .md-button:not(.isActive):active{background-color:var(--button-ghost-pressed-bg-color,var(--button-secondary-pressed-bg-color))}:host([variant=tab]) .md-button:not(.isActive).disabled,:host([variant=tab]) .md-button:not(.isActive):disabled{background-color:var(--button-ghost-disabled-bg-color,transparent);color:var(--button-ghost-disabled-text-color,var(--button-disabled-text-color))}:host([variant=tab]) .md-button.isActive{background-color:var(--button-ghost-active-bg-color);color:var(--button-ghost-active-text-color)}:host([variant=tab]) .md-button.isActive:hover{background-color:var(--button-ghost-active-hover-bg-color)}:host([variant=tab]) .md-button.isActive:active{background-color:var(--button-ghost-active-pressed-bg-color)}:host([variant=tab]) .md-button.isActive.disabled,:host([variant=tab]) .md-button.isActive:disabled{background-color:var(--button-ghost-active-disabled-bg-color);color:var(--button-ghost-active-disabled-text-color)}::slotted(*){display:flex}::slotted([slot=text]){align-self:end;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::slotted(:not(:first-child)){display:inline-block;margin-left:.5rem}::slotted(md-icon){line-height:normal}md-spinner{display:flex}md-spinner+::slotted(*){margin-left:.5rem}@media(forced-colors:active){:host .md-button:focus{outline:2px solid Highlight}:host .md-button:active{color:Highlight;outline:2px solid Highlight}:host .md-button.disabled,:host .md-button[disabled]{color:GrayText!important}:host .md-button--outline.disabled{color:GrayText!important}:host .md-button--outline:active:disabled,:host .md-button--outline:focus:disabled{outline:2px solid Highlight}}`,s=function(t,o,d,r){var a,n=arguments.length,e=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,d):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)e=Reflect.decorate(t,o,d,r);else for(var b=t.length-1;b>=0;b--)(a=t[b])&&(e=(n<3?a(e):n>3?a(o,d,e):a(o,d))||e);return n>3&&e&&Object.defineProperty(o,d,e),e};const l=["20","24","28","32","36","40","44","52","56","72","68","84","size-none",20,24,28,32,36,40,44,52,56,68,72,68,84],h=["button","input","a"],v=["button","reset","submit"],g=["button","checkbox","link","menuitem","menuitemcheckbox","menuitemradio","option","radio","switch","tab"],f=["primary","secondary","red","green","ghost","white","darkGrey","promotional","tab","available","unavailable","engaged","idle"],y=["blue","red","green","orange","yellow","mint","purple","pink","cyan","white","dark-gray","duck-egg","violet","color-none",""],k=["","off","polite","assertive"];var p;!function(t){let o=class extends b.LitElement{constructor(){super(...arguments),this._active=!1,this._tabIndex=0,this.ariaLabel="",this.ariaLabelledBy="",this.ariaLive="",this.ariaExpanded="",this.ariaHaspopup="false",this.ariaPressed="",this.circle=!1,this.color="",this.containerLarge=!1,this.disabled=!1,this.href="",this.id="",this.value="",this.keyboardKey="",this.label="",this.loading=!1,this.outline=!1,this.hasRemoveStyle=!1,this.size="32",this.tag="button",this.type="button",this.role="button",this.variant="secondary",this.width="",this.maxWidth="",this.activityType="",this.iconActive=!1,this.isActive=!1,this.renderWidth=()=>this.width?`width: ${this.width};`:i.nothing,this.renderMaxWidth=()=>this.maxWidth?`max-width: ${this.maxWidth};`:i.nothing,this.getStyles=()=>{if(this.width||this.maxWidth)return b.html`
|
|
2
2
|
<style>
|
|
3
3
|
:host .md-button--${this.size} {
|
|
4
4
|
${this.renderWidth()};
|
package/dist/chunks/md-83.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[83],{102:function(e,t,i){"use strict";i.r(t),i.d(t,"MORE_MENU_TAB_COPY_ID_PREFIX",(function(){return y})),i.d(t,"Tabs",(function(){return g}));i(15),i(30);var s=i(1),a=i(7),n=i(5),l=i(0),o=i(4),d=i(13),r=i(8),b=i(69),h=i(22),c=i(31),u=i.n(c),p=i(63),m=i(38),v=i(44),T=function(e,t,i,s){var a,n=arguments.length,l=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,s);else for(var o=e.length-1;o>=0;o--)(a=e[o])&&(l=(n<3?a(l):n>3?a(t,i,l):a(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l},f=function(e,t,i,s){return new(i||(i=Promise))((function(a,n){function l(e){try{d(s.next(e))}catch(e){n(e)}}function o(e){try{d(s.throw(e))}catch(e){n(e)}}function d(e){var t;e.done?a(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(l,o)}d((s=s.apply(e,t||[])).next())}))};const y="more-menu-copy-";var g;!function(e){let t=class extends(Object(a.c)(Object(a.d)(Object(a.e)(l.LitElement)))){constructor(){super(...arguments),this.justified=!1,this.overflowLabel="More Tabs",this.draggable=!1,this.direction="horizontal",this.moreItemsScrollLimit=Number.MAX_SAFE_INTEGER,this.delay=0,this.animation=100,this.ghostClass="",this.chosenClass="",this.forceFallback=!1,this.fallbackClass="",this.tabsId="",this.persistSelection=!1,this.compUniqueId="",this.type="Line",this.newMomentum=!1,this.isMoreTabMenuVisible=!1,this.isMoreTabMenuMeasured=!1,this.isMoreTabMenuOpen=!1,this.isMoreTabMenuSelected=!1,this.isMoreTabMenuScrollable=!1,this.moreTabMenuOffsetWidth=0,this.moreTabMenuMaxHeight=null,this.tabsViewportDataList=[],this.tabsFilteredAsVisibleList=[],this.tabsFilteredAsHiddenList=[],this.noTabsVisible=!1,this.defaultTabsOrderArray=[],this.tabsOrderPrefsArray=[],this.tabs=[],this.panels=[],this.tabsCopy=[],this.tabsHash={},this.tabsCopyHash={},this.tabsIdxHash={},this.tabsVisibleIdxHash={},this.tabsHiddenIdxHash={},this.visibleTabsSortableInstance=null,this.hiddenTabsSortableInstance=null,this.handleOnDragEnd=e=>f(this,void 0,void 0,(function*(){var t,i,s,a,n,l,o,d,r,b;e.stopPropagation();const h=e.oldIndex,c=e.newIndex,u=[...this.tabsFilteredAsVisibleList],p=[...this.tabsFilteredAsHiddenList],m=this.getDragDirection(e);if(void 0!==h&&void 0!==c){switch(m){case"visibleToHidden":{null===(i=null===(t=this.hiddenTabsContainerElement)||void 0===t?void 0:t.querySelector("#"+e.item.id))||void 0===i||i.remove();const s=u[h],a=p.slice(-1)[0],n=c===this.tabsFilteredAsHiddenList.length?c-1:c;p.splice(n,0,s),p.pop();const l=u.filter(t=>t.id!==this.getNormalizedTabId(e.item.id));l.push(a),this.tabsFilteredAsVisibleList=[...l],this.tabsFilteredAsHiddenList=[...p];break}case"visibleToVisible":{const e=u[h];u.splice(h,1),u.splice(c,0,e),this.tabsFilteredAsVisibleList=u,c===this.tabsFilteredAsVisibleList.length-1&&(null===(a=null===(s=this.visibleTabsContainerElement)||void 0===s?void 0:s.children[this.visibleTabsContainerElement.children.length-1])||void 0===a||a.remove());const t=this.visibleTabsContainerElement.children[h],i=this.visibleTabsContainerElement.children[c];if(!t||!i)return;null===(n=this.visibleTabsContainerElement)||void 0===n||n.replaceChild(i,t),null===(l=this.visibleTabsContainerElement)||void 0===l||l.insertBefore(t,i);break}case"hiddenToVisible":{null===(d=null===(o=this.visibleTabsContainerElement)||void 0===o?void 0:o.querySelector("#"+e.item.id))||void 0===d||d.remove();const t=p[h],i=u.slice(-1)[0];p.splice(h,1),p.splice(0,0,i);const s=c===this.tabsFilteredAsVisibleList.length?c-1:c;u.splice(s,0,t),u.pop(),this.tabsFilteredAsVisibleList=u,this.tabsFilteredAsHiddenList=p;break}case"hiddenToHidden":{const e=p[h];p.splice(h,1),p.splice(c,0,e),this.tabsFilteredAsHiddenList=p,c===this.tabsFilteredAsHiddenList.length-1&&(null===(b=null===(r=this.hiddenTabsContainerElement)||void 0===r?void 0:r.children[this.hiddenTabsContainerElement.children.length-1])||void 0===b||b.remove());break}}if(this.compUniqueId){const e=[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList],t=e.findIndex(e=>e.selected);this.storeSelectedTabIndex(t),this.tabsOrderPrefsArray=e.map(e=>e.name),localStorage.setItem(this.compUniqueId,this.tabsOrderPrefsArray.join(","))}}}))}generateOptions(){return{group:"shared",animation:10,swapThreshold:1,draggable:"md-tab",direction:this.direction,forceFallback:this.forceFallback,fallbackClass:this.fallbackClass,ghostClass:this.ghostClass,chosenClass:this.chosenClass,onEnd:this.handleOnDragEnd}}getCopyTabId(e){var t;return(null===(t=e.id)||void 0===t?void 0:t.startsWith(y))?`${y}${e.id}`:e.id}getAriaControlId(e){var t,i;if(null===(t=e.id)||void 0===t?void 0:t.startsWith(y))return`${y}${e.id}`;return"tab_panel_"+(null===(i=e.id)||void 0===i?void 0:i.substring(4))}getTabIndex(e){var t,i;return this.isMoreTabMenuVisible&&0===this.getCurrentIndex(null==e?void 0:e.id)&&this.selected>(null===(t=this.tabsFilteredAsVisibleList)||void 0===t?void 0:t.length)-1||(null===(i=this.tabsFilteredAsVisibleList[this.selected])||void 0===i?void 0:i.id)===e.id?0:-1}getNormalizedTabId(e){return e.replace(y,"")}static get styles(){return[n.a,m.a]}ensureTabsUpdateComplete(e){return f(this,void 0,void 0,(function*(){const t=e.map(e=>void 0!==e.updateComplete?e.updateComplete:null).filter(e=>null!==e);t.length&&(yield Promise.all(t))}))}measureTabsOffsetWidth(){return this.justified||"vertical"===this.direction?this.tabs.map(e=>{e.setAttribute("measuringrealwidth","");const t=e.closable?e.offsetWidth+v.TAB_CROSS_WIDTH:e.offsetWidth;return e.removeAttribute("measuringrealwidth"),t}):this.tabs.map(e=>e.closable?e.offsetWidth+v.TAB_CROSS_WIDTH:e.offsetWidth)}measureHiddenTabsCopiesOffsetHeight(){return this.tabsCopy.map(e=>e.offsetHeight)}manageOverflow(){var e,t;return f(this,void 0,void 0,(function*(){if("vertical"!==this.direction){let i;i=0===this.tabsFilteredAsVisibleList.length&&0===this.tabsFilteredAsHiddenList.length?[...this.tabs]:[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList],i.forEach(e=>{var t,i,s,a,n;if((null===(t=e.children)||void 0===t?void 0:t.length)&&0===(null===(s=null===(i=e.children[0])||void 0===i?void 0:i.children)||void 0===s?void 0:s.length)){const t=null===(a=null==e?void 0:e.querySelector("slot"))||void 0===a?void 0:a.assignedNodes({flatten:!0})[0].cloneNode(!0);t&&(t.classList.add("tab-content"),null===(n=null==e?void 0:e.children[0])||void 0===n||n.appendChild(t))}});const s=i.length;if(this.tabsListElement&&s){const a=(null===(e=this.tabsSettingsElement)||void 0===e?void 0:e.offsetWidth)?this.tabsListElement.offsetWidth-(null===(t=this.tabsSettingsElement)||void 0===t?void 0:t.offsetWidth):this.tabsListElement.offsetWidth;yield this.ensureTabsUpdateComplete(this.tabs);const n=this.measureTabsOffsetWidth(),l=i.reduce((e,t,i)=>e+=n[i],0);if(l){yield this.setupMoreTab();let e=!0;a<l&&(e=!1);const t=[];let o=0;i.forEach((i,l)=>{o+=n[l];const d=!e&&o+(l<s-1?this.moreTabMenuOffsetWidth:0)>a;t.push({isTabInViewportHidden:d,tabOffsetWidth:n[l]})}),this.tabsViewportDataList=t,this.tabsViewportDataList.forEach((e,t)=>this.tabs[t].viewportHidden=e.isTabInViewportHidden),this.isMoreTabMenuVisible=!!this.tabsViewportDataList.find(e=>e.isTabInViewportHidden),this.tabsFilteredAsVisibleList=i.filter((e,t)=>!this.tabsViewportDataList[t].isTabInViewportHidden),this.tabsVisibleIdxHash=this.tabsFilteredAsVisibleList.reduce((e,t,i)=>(e[t.id]=i,e),{}),this.tabsFilteredAsHiddenList=i.filter((e,t)=>this.tabsViewportDataList[t].isTabInViewportHidden),this.tabsHiddenIdxHash=this.tabsFilteredAsHiddenList.reduce((e,t,i)=>(e[t.id]=i,e),{})}}this.updateIsMoreTabMenuSelected();const a=this.tabsFilteredAsHiddenList.find(e=>!e.disabled);this.updateHiddenIdPositiveTabIndex(a)}}))}updateIsMoreTabMenuSelected(){this.isMoreTabMenuSelected=!!this.tabsFilteredAsHiddenList.find(e=>e.selected)}updateHiddenIdPositiveTabIndex(e){this.tabHiddenIdPositiveTabIndex=e?e.id:void 0}sortTabsAndPanes(){if(!this.tabsOrderPrefsArray.length)return;const e=(e,t)=>{const i=e.getAttribute("name")||"",s=t.getAttribute("name")||"";return this.tabsOrderPrefsArray.indexOf(i)-this.tabsOrderPrefsArray.indexOf(s)};this.tabs.sort(e),this.panels.sort(e)}linkPanelsAndTabs(){return f(this,void 0,void 0,(function*(){this.sortTabsAndPanes();const{tabs:e,panels:t}=this;if(0===e.length||0===t.length)return void console.warn("The tabs or panels count should't be equal zero.");e.length!==t.length&&console.warn(`The amount of tabs (${e.length}) doesn't match the amount of panels (${t.length}).`),e.forEach((e,i)=>{const s=Object(h.nanoid)(10),a="tab_"+s,n="tab_panel_"+s;e.setAttribute("id",a),e.setAttribute("aria-controls",n),e.selected=this.selected===i,"vertical"===this.direction&&(e.vertical=!0);const l=t[i];l?(l.setAttribute("id",n),l.setAttribute("aria-labelledby",a),l.selected=this.selected===i,e.disabled&&(l.hidden=!0,l.selected=!1)):e.disabled=!0});let i=this.selected;for(;i<e.length&&e[i].disabled;)i++;i=i===e.length?0:i,e[i].selected=!0,t[i].selected=!0,this.tabsHash=this.tabs.reduce((e,t)=>(e[t.id]=t,e),{}),this.tabsIdxHash=this.tabs.reduce((e,t,i)=>(e[t.id]=i,e),{})}))}get slotItem(){return this.tabSlotElement}filterSlotted(){return this.tabSlotElement.assignedElements()}handleResize(e){const t=Object.create(null,{handleResize:{get:()=>super.handleResize}});return f(this,void 0,void 0,(function*(){t.handleResize&&t.handleResize.call(this,e),yield this.manageOverflow()}))}getDragDirection(e){return e.from===this.visibleTabsContainerElement&&e.to===this.hiddenTabsContainerElement?"visibleToHidden":e.from===this.visibleTabsContainerElement&&e.to===this.visibleTabsContainerElement?"visibleToVisible":e.from===this.hiddenTabsContainerElement&&e.to===this.visibleTabsContainerElement?"hiddenToVisible":e.from===this.hiddenTabsContainerElement&&e.to===this.hiddenTabsContainerElement?"hiddenToHidden":void 0}makeTabCopyFocus(e){e&&e.focus()}handleTabClick(e){const{id:t}=e.detail;this.handleNewSelectedTab(t)}handleNewSelectedTab(e){const t=this.tabsHash[this.getNormalizedTabId(e)];if(t&&!t.disabled){const e=this.tabsIdxHash[t.id];-1!==e&&this.updateSelectedTab(e);{const e=this.tabsCopyHash[this.getCopyTabId(t)];e&&this.makeTabCopyFocus(e),this.updateHiddenIdPositiveTabIndex(t)}}}handleTabCrossClick(e){const{id:t}=e.detail;this.handleTabCloseEvent(t)}handleTabCloseClick(e){const{id:t}=e.detail;this.handleTabCloseEvent(t)}handleTabCloseEvent(e){var t,i;const s=this.tabsHash[this.getNormalizedTabId(e)];if(s&&!s.disabled&&("auto"===s.closable||"custom"===s.closable)){const s=this.tabsFilteredAsVisibleList.findIndex(t=>this.getNormalizedTabId(t.id)===this.getNormalizedTabId(e));this.tabsFilteredAsVisibleList=this.tabsFilteredAsVisibleList.filter(t=>this.getNormalizedTabId(t.id)!==this.getNormalizedTabId(e)),null===(i=null===(t=this.visibleTabsContainerElement)||void 0===t?void 0:t.querySelector("#"+e))||void 0===i||i.remove(),0!==this.tabsFilteredAsHiddenList.length&&(this.tabsFilteredAsVisibleList.push(this.tabsFilteredAsHiddenList[0]),this.tabsFilteredAsHiddenList.splice(0,1)),0===this.tabsFilteredAsHiddenList.length&&(this.isMoreTabMenuVisible=!1,this.isMoreTabMenuMeasured=!1),this.handleUpdatedSeletedTabAfterCross(s)}}handleUpdatedSeletedTabAfterCross(e){var t;let i=e;for(;i<this.tabsFilteredAsVisibleList.length&&(null===(t=this.tabsFilteredAsVisibleList[i])||void 0===t?void 0:t.disabled);)i++;if(void 0===this.tabsFilteredAsVisibleList[i]||e===this.tabsFilteredAsVisibleList.length)for(i=e-1;i>=0&&this.tabsFilteredAsVisibleList[i].disabled;)i--;if(-1!==i){const e=this.tabs.findIndex(e=>e.id===this.tabsFilteredAsVisibleList[i].id);this.updateSelectedTab(e)}else this.updateSelectedTab(i);this.noTabsVisible=0===this.tabsFilteredAsVisibleList.length&&0===this.tabsFilteredAsHiddenList.length,this.requestUpdate()}updateSelectedTab(e){const{tabs:t,panels:i}=this,s=this.tabs.findIndex(e=>e.hasAttribute("selected"));if(t&&i&&[s,e].forEach(e=>{const s=t[e];s&&s.toggleAttribute("selected");const a=i[e];if(a&&a.toggleAttribute("selected"),s){const e=this.tabsCopyHash[this.getCopyTabId(s)];e?(e.toggleAttribute("selected"),this.isMoreTabMenuSelected=!0):this.isMoreTabMenuSelected=!1}}),e>=0){this.dispatchSelectedChangedEvent(e);const i=("horizontal"===this.direction?[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList]:this.tabs).findIndex(i=>i.id===t[e].id);this.changeSelectedTabIdx(i)}}dispatchSelectedChangedEvent(e){const t=[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList],i=this.tabs[e].id,s=t.findIndex(e=>e.id===i),a=[];t.forEach(e=>{a.push(e.name)}),this.dispatchEvent(new CustomEvent("selected-changed",{detail:{value:s,tabsOrder:a},composed:!0,bubbles:!0}))}changeSelectedTabIdx(e){this.requestUpdate(),this.selected=e,this.updateComplete.then(()=>{var t,i;if(e<this.tabsFilteredAsVisibleList.length){const e=null===(t=this.visibleTabsContainerElement)||void 0===t?void 0:t.children[this.selected];null==e||e.focus(),null==e||e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}else{const e=this.selected-this.tabsFilteredAsVisibleList.length,t=null===(i=this.hiddenTabsContainerElement)||void 0===i?void 0:i.children[e];null==t||t.focus(),null==t||t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"});const s=this.tabsFilteredAsHiddenList[e];!(null==s?void 0:s.disabled)&&this.updateHiddenIdPositiveTabIndex(s)}}),this.updateIsMoreTabMenuSelected(),this.storeSelectedTabIndex(e)}storeSelectedTabIndex(e){this.persistSelection&&this.tabsId&&e>-1&&""!==this.tabsId.trim()&&sessionStorage.setItem(this.tabsId,""+e)}getCurrentIndex(e){var t,i;const s=(null===(t=this.visibleTabsContainerElement)||void 0===t?void 0:t.children.length)||0;for(let t=0;t<s;t++)if((null===(i=this.visibleTabsContainerElement)||void 0===i?void 0:i.children[t].id)===e)return t;return this.tabsVisibleIdxHash[e]}moveFocusToAdjacentTab(e,t){var i;const s=this.getCurrentIndex(e),a=null===(i=this.visibleTabsContainerElement)||void 0===i?void 0:i.children,n=(null==a?void 0:a.length)||0;if(!a||0===n)return;let l=0;"previous"===t?l=0===s?n-1:s-1:"next"===t?l=s===n-1?0:s+1:"fromMoreTabs"===t&&(l=this.selected>=n?0:this.selected),this.moveFocusToTab(a[l])}moveFocusToTab(e){Object(p.setTimeout)(()=>null==e?void 0:e.focus(),0)}handleOverlayClose(){this.menuOverlayElement&&(this.menuOverlayElement.isOpen=!1)}dispatchKeydownEvent(e,t){t&&this.dispatchEvent(new CustomEvent("tab-keydown",{detail:{id:t,key:e.code,ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,altKey:e.altKey,srcEvent:e},bubbles:!0,composed:!0}))}handleTabKeydown(e){var t,i,a,n,l,o;let d;if(e.target!=this&&!this.tabs.find(t=>t.id===e.target.id))return!1;d=e.path?e.path[0].id:e.composedPath()?e.composedPath()[0].id:e.originalTarget.id;const r=this.getNormalizedTabId(d);this.dispatchKeydownEvent(e,r);const b=e.code,{shiftKey:h}=e,c=!!this.isMoreTabMenuVisible&&"tab-more"===r,u=c&&this.isMoreTabMenuVisible?this.moreTabMenuElement:this.tabsHash[this.getNormalizedTabId(r)],p=!this.isMoreTabMenuVisible||u&&this.tabsVisibleIdxHash[u.id]>-1,m=!!this.isMoreTabMenuVisible&&(u&&this.tabsHiddenIdxHash[u.id]>-1),v=this.isMoreTabMenuVisible?this.tabsFilteredAsVisibleList.length-1:this.tabs.length-1,T=this.isMoreTabMenuVisible?this.tabsFilteredAsVisibleList.length:-1,f=this.isMoreTabMenuVisible?this.tabsFilteredAsVisibleList.length+this.tabsFilteredAsHiddenList.length-1:-1;switch(b){case s.b.Tab:c&&!this.isMoreTabMenuOpen&&h&&(e.preventDefault(),this.moveFocusToAdjacentTab(d,"fromMoreTabs"));break;case s.b.End:c||(p?(e.preventDefault(),this.moveFocusToTab(null===(t=this.visibleTabsContainerElement)||void 0===t?void 0:t.children[(null===(i=this.tabsFilteredAsVisibleList)||void 0===i?void 0:i.length)-1])):this.isMoreTabMenuOpen&&(e.preventDefault(),this.moveFocusToTab(null===(a=this.hiddenTabsContainerElement)||void 0===a?void 0:a.children[(null===(n=this.tabsFilteredAsHiddenList)||void 0===n?void 0:n.length)-1])));break;case s.b.Home:p?(e.preventDefault(),this.moveFocusToTab(null===(l=this.visibleTabsContainerElement)||void 0===l?void 0:l.children[0])):this.isMoreTabMenuOpen&&(e.preventDefault(),this.moveFocusToTab(null===(o=this.hiddenTabsContainerElement)||void 0===o?void 0:o.children[0]));break;case s.b.ArrowLeft:c||p&&(e.stopPropagation(),this.moveFocusToAdjacentTab(d,"previous"));break;case s.b.ArrowRight:c||p&&(e.stopPropagation(),this.moveFocusToAdjacentTab(d,"next"));break;case s.b.ArrowUp:if(c);else if(p&&"vertical"===this.direction)e.preventDefault(),this.changeSelectedTabIdx(0===this.selected?v:this.selected-1);else if(m){e.preventDefault();const t=this.selected===T?f:this.selected-1;this.changeSelectedTabIdx(t)}break;case s.b.ArrowDown:if(c);else if(p&&"vertical"===this.direction)e.preventDefault(),this.changeSelectedTabIdx(this.selected===v?0:this.selected+1);else if(m){e.preventDefault();const t=this.selected===f?T:this.selected+1;this.changeSelectedTabIdx(t)}break;case s.b.Enter:case s.b.NumpadEnter:case s.b.Space:if(c){const e=this.tabsFilteredAsHiddenList.filter(e=>!e.disabled),t=e.length?e.find(e=>e.selected)||e[0]:void 0;if(this.updateHiddenIdPositiveTabIndex(t),t){const e=this.tabsIdxHash[this.getNormalizedTabId(t.id)];-1!==e&&this.updateSelectedTab(e)}}else if(u&&!u.disabled){const t=this.tabsIdxHash[this.getNormalizedTabId(u.id)];-1!==t&&(e.preventDefault(),this.updateSelectedTab(t))}}}setupTabsEvents(){this.addEventListener("tab-click",this.handleTabClick),this.addEventListener("tab-cross-click",this.handleTabCrossClick),this.addEventListener("tab-close-click",this.handleTabCloseClick),this.addEventListener("keydown",this.handleTabKeydown),this.addEventListener("clear-tab-order-prefs",this.clearTabOrderPrefs)}teardownTabsEvents(){this.removeEventListener("tab-click",this.handleTabClick),this.removeEventListener("tab-cross-click",this.handleTabCrossClick),this.removeEventListener("tab-close-click",this.handleTabCloseClick),this.removeEventListener("keydown",this.handleTabKeydown),this.removeEventListener("clear-tab-order-prefs",this.clearTabOrderPrefs)}clearTabOrderPrefs(e){const{compUniqueId:t}=e.detail;t===this.compUniqueId&&(localStorage.removeItem(this.tabsId),sessionStorage.removeItem(this.tabsId),localStorage.removeItem(this.compUniqueId),this.tabsOrderPrefsArray=this.defaultTabsOrderArray,this.selected=0,this.initializeTabs(),this.dispatchSelectedChangedEvent(0))}setupPanelsAndTabs(){this.tabSlotElement&&(this.tabs=this.tabSlotElement.assignedElements()),this.panelSlotElement&&(this.panels=this.panelSlotElement.assignedElements()),this.defaultTabsOrderArray=this.tabs.map(e=>e.name)}setupMoreTab(){return f(this,void 0,void 0,(function*(){"vertical"!==this.direction&&this.moreTabMenuElement&&!this.isMoreTabMenuMeasured&&(this.moreTabMenuElement.classList.add("md-menu-overlay__more_tab--measuring"),yield this.moreTabMenuElement.updateComplete,this.moreTabMenuElement.offsetWidth&&(this.moreTabMenuOffsetWidth=this.moreTabMenuElement.offsetWidth,this.isMoreTabMenuMeasured=!0),this.moreTabMenuElement.classList.remove("md-menu-overlay__more_tab--measuring"))}))}initializeSortable(){this.visibleTabsContainerElement&&this.hiddenTabsContainerElement&&(this.visibleTabsSortableInstance=u.a.create(this.visibleTabsContainerElement,this.generateOptions()),this.hiddenTabsSortableInstance=u.a.create(this.hiddenTabsContainerElement,this.generateOptions()))}initializeTabs(){this.tabs=[],this.panels=[],this.tabsFilteredAsVisibleList=[],this.tabsFilteredAsHiddenList=[],this.isMoreTabMenuVisible=!1,this.setupPanelsAndTabs(),this.linkPanelsAndTabs(),this.draggable&&this.initializeSortable(),this.manageOverflow(),this.requestUpdate()}connectedCallback(){var e;if(super.connectedCallback(),this.setupTabsEvents(),this.persistSelection){if(!this.tabsId||""===this.tabsId.trim())return void console.error("Unique tabs-id attribute is mandatory for persist the selection of tab ");const e=localStorage.getItem(this.tabsId);this.selected=e&&parseInt(e)>-1?parseInt(e):this.selected}this.compUniqueId&&(this.tabsOrderPrefsArray=(null===(e=localStorage.getItem(this.compUniqueId))||void 0===e?void 0:e.split(","))||[])}selectTabFromStorage(){if(this.persistSelection){if(!this.tabsId||""===this.tabsId.trim())return void console.error("Unique tabs-id attribute is mandatory for persist the selection of tab ");const e=sessionStorage.getItem(this.tabsId);let t=0;if(e){const i=parseInt(e);t=i>-1?i:this.selected}const i=[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList];i.length&&i[t].id?this.handleNewSelectedTab(i[t].id):this.selected=t}}disconnectedCallback(){super.disconnectedCallback(),this.teardownTabsEvents()}firstUpdated(e){super.firstUpdated(e),this.setupPanelsAndTabs(),this.linkPanelsAndTabs(),this.selectTabFromStorage()}updated(e){var t;if(super.updated(e),e.has("slotted")&&this.initializeTabs(),!this.draggable||this.visibleTabsSortableInstance||this.hiddenTabsSortableInstance||this.initializeSortable(),e.has("tabsFilteredAsHiddenList")&&(this.tabsCopy=Array.from((null===(t=this.tabsCopyHiddenListElements)||void 0===t?void 0:t.values())||[]),this.tabsCopyHash=this.tabsCopy.reduce((e,t)=>(e[t.id]=t,e),{})),(e.has("tabsFilteredAsVisibleList")||e.has("tabsFilteredAsHiddenList"))&&(this.tabsVisibleIdxHash=this.tabsFilteredAsVisibleList.reduce((e,t,i)=>(e[t.id]=i,e),{}),this.tabsHiddenIdxHash=this.tabsFilteredAsHiddenList.reduce((e,t,i)=>(e[t.id]=i,e),{})),e.has("isMoreTabMenuOpen")&&this.isMoreTabMenuVisible){const t=e.get("isMoreTabMenuOpen");this.isMoreTabMenuOpen&&!t&&(this.moreItemsScrollLimit<this.tabsCopy.length?(this.isMoreTabMenuScrollable=!0,this.moreTabMenuMaxHeight=this.measureHiddenTabsCopiesOffsetHeight().slice(0,this.moreItemsScrollLimit).reduce((e,t)=>e+=t,0)+"px"):(this.isMoreTabMenuScrollable=!1,this.moreTabMenuMaxHeight=null))}e.has("tabsId")&&this.selectTabFromStorage()}render(){return l.html`
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[83],{102:function(e,t,i){"use strict";i.r(t),i.d(t,"MORE_MENU_TAB_COPY_ID_PREFIX",(function(){return y})),i.d(t,"Tabs",(function(){return g}));i(15),i(30);var s=i(1),a=i(7),n=i(5),l=i(0),o=i(4),d=i(13),r=i(8),b=i(69),h=i(22),c=i(31),u=i.n(c),p=i(63),m=i(38),v=i(44),T=function(e,t,i,s){var a,n=arguments.length,l=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,s);else for(var o=e.length-1;o>=0;o--)(a=e[o])&&(l=(n<3?a(l):n>3?a(t,i,l):a(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l},f=function(e,t,i,s){return new(i||(i=Promise))((function(a,n){function l(e){try{d(s.next(e))}catch(e){n(e)}}function o(e){try{d(s.throw(e))}catch(e){n(e)}}function d(e){var t;e.done?a(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(l,o)}d((s=s.apply(e,t||[])).next())}))};const y="more-menu-copy-";var g;!function(e){let t=class extends(Object(a.c)(Object(a.d)(Object(a.e)(l.LitElement)))){constructor(){super(...arguments),this.justified=!1,this.overflowLabel="More Tabs",this.draggable=!1,this.direction="horizontal",this.moreItemsScrollLimit=Number.MAX_SAFE_INTEGER,this.delay=0,this.animation=100,this.ghostClass="",this.chosenClass="",this.forceFallback=!1,this.fallbackClass="",this.tabsId="",this.persistSelection=!1,this.compUniqueId="",this.type="Line",this.newMomentum=!1,this.isMoreTabMenuVisible=!1,this.isMoreTabMenuMeasured=!1,this.isMoreTabMenuOpen=!1,this.isMoreTabMenuSelected=!1,this.isMoreTabMenuScrollable=!1,this.moreTabMenuOffsetWidth=0,this.moreTabMenuMaxHeight=null,this.tabsViewportDataList=[],this.tabsFilteredAsVisibleList=[],this.tabsFilteredAsHiddenList=[],this.noTabsVisible=!1,this.defaultTabsOrderArray=[],this.tabsOrderPrefsArray=[],this.tabs=[],this.panels=[],this.tabsCopy=[],this.tabsHash={},this.tabsCopyHash={},this.tabsIdxHash={},this.tabsVisibleIdxHash={},this.tabsHiddenIdxHash={},this.visibleTabsSortableInstance=null,this.hiddenTabsSortableInstance=null,this.handleOnDragEnd=e=>f(this,void 0,void 0,(function*(){var t,i,s,a,n,l,o,d,r,b;e.stopPropagation();const h=e.oldIndex,c=e.newIndex,u=[...this.tabsFilteredAsVisibleList],p=[...this.tabsFilteredAsHiddenList],m=this.getDragDirection(e);if(void 0!==h&&void 0!==c){switch(m){case"visibleToHidden":{null===(i=null===(t=this.hiddenTabsContainerElement)||void 0===t?void 0:t.querySelector("#"+e.item.id))||void 0===i||i.remove();const s=u[h],a=p.slice(-1)[0],n=c===this.tabsFilteredAsHiddenList.length?c-1:c;p.splice(n,0,s),p.pop();const l=u.filter(t=>t.id!==this.getNormalizedTabId(e.item.id));l.push(a),this.tabsFilteredAsVisibleList=[...l],this.tabsFilteredAsHiddenList=[...p];break}case"visibleToVisible":{const e=u[h];u.splice(h,1),u.splice(c,0,e),this.tabsFilteredAsVisibleList=u,c===this.tabsFilteredAsVisibleList.length-1&&(null===(a=null===(s=this.visibleTabsContainerElement)||void 0===s?void 0:s.children[this.visibleTabsContainerElement.children.length-1])||void 0===a||a.remove());const t=this.visibleTabsContainerElement.children[h],i=this.visibleTabsContainerElement.children[c];if(!t||!i)return;null===(n=this.visibleTabsContainerElement)||void 0===n||n.replaceChild(i,t),null===(l=this.visibleTabsContainerElement)||void 0===l||l.insertBefore(t,i);break}case"hiddenToVisible":{null===(d=null===(o=this.visibleTabsContainerElement)||void 0===o?void 0:o.querySelector("#"+e.item.id))||void 0===d||d.remove();const t=p[h],i=u.slice(-1)[0];p.splice(h,1),p.splice(0,0,i);const s=c===this.tabsFilteredAsVisibleList.length?c-1:c;u.splice(s,0,t),u.pop(),this.tabsFilteredAsVisibleList=u,this.tabsFilteredAsHiddenList=p;break}case"hiddenToHidden":{const e=p[h];p.splice(h,1),p.splice(c,0,e),this.tabsFilteredAsHiddenList=p,c===this.tabsFilteredAsHiddenList.length-1&&(null===(b=null===(r=this.hiddenTabsContainerElement)||void 0===r?void 0:r.children[this.hiddenTabsContainerElement.children.length-1])||void 0===b||b.remove());break}}if(this.compUniqueId){const e=[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList],t=e.findIndex(e=>e.selected);this.storeSelectedTabIndex(t),this.tabsOrderPrefsArray=e.map(e=>e.name),localStorage.setItem(this.compUniqueId,this.tabsOrderPrefsArray.join(","))}}}))}generateOptions(){return{group:"shared",animation:10,swapThreshold:1,draggable:"md-tab",direction:this.direction,forceFallback:this.forceFallback,fallbackClass:this.fallbackClass,ghostClass:this.ghostClass,chosenClass:this.chosenClass,onEnd:this.handleOnDragEnd}}getCopyTabId(e){var t;return(null===(t=e.id)||void 0===t?void 0:t.startsWith(y))?`${y}${e.id}`:e.id}getAriaControlId(e){var t,i;if(null===(t=e.id)||void 0===t?void 0:t.startsWith(y))return`${y}${e.id}`;return"tab_panel_"+(null===(i=e.id)||void 0===i?void 0:i.substring(4))}getTabIndex(e){var t,i;return this.isMoreTabMenuVisible&&0===this.getCurrentIndex(null==e?void 0:e.id)&&this.selected>(null===(t=this.tabsFilteredAsVisibleList)||void 0===t?void 0:t.length)-1||(null===(i=this.tabsFilteredAsVisibleList[this.selected])||void 0===i?void 0:i.id)===e.id?0:-1}getNormalizedTabId(e){return e.replace(y,"")}static get styles(){return[n.a,m.a]}ensureTabsUpdateComplete(e){return f(this,void 0,void 0,(function*(){const t=e.map(e=>void 0!==e.updateComplete?e.updateComplete:null).filter(e=>null!==e);t.length&&(yield Promise.all(t))}))}measureTabsOffsetWidth(){return this.justified||"vertical"===this.direction?this.tabs.map(e=>{e.setAttribute("measuringrealwidth","");const t=e.closable?e.offsetWidth+v.TAB_CROSS_WIDTH:e.offsetWidth;return e.removeAttribute("measuringrealwidth"),t}):this.tabs.map(e=>e.closable?e.offsetWidth+v.TAB_CROSS_WIDTH:e.offsetWidth)}measureHiddenTabsCopiesOffsetHeight(){return this.tabsCopy.map(e=>e.offsetHeight)}manageOverflow(){var e,t;return f(this,void 0,void 0,(function*(){if("vertical"!==this.direction){let i;i=0===this.tabsFilteredAsVisibleList.length&&0===this.tabsFilteredAsHiddenList.length?[...this.tabs]:[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList],i.forEach(e=>{var t,i,s,a,n;if((null===(t=e.children)||void 0===t?void 0:t.length)&&0===(null===(s=null===(i=e.children[0])||void 0===i?void 0:i.children)||void 0===s?void 0:s.length)){const t=null===(a=null==e?void 0:e.querySelector("slot"))||void 0===a?void 0:a.assignedNodes({flatten:!0})[0].cloneNode(!0);t&&(t.classList.add("tab-content"),null===(n=null==e?void 0:e.children[0])||void 0===n||n.appendChild(t))}});const s=i.length;if(this.tabsListElement&&s){const a=(null===(e=this.tabsSettingsElement)||void 0===e?void 0:e.offsetWidth)?this.tabsListElement.offsetWidth-(null===(t=this.tabsSettingsElement)||void 0===t?void 0:t.offsetWidth):this.tabsListElement.offsetWidth;yield this.ensureTabsUpdateComplete(this.tabs);const n=this.measureTabsOffsetWidth(),l=i.reduce((e,t,i)=>e+=n[i],0);if(l){yield this.setupMoreTab();let e=!0;a<l&&(e=!1);const t=[];let o=0;i.forEach((i,l)=>{o+=n[l];const d=!e&&o+(l<s-1?this.moreTabMenuOffsetWidth:0)>a;t.push({isTabInViewportHidden:d,tabOffsetWidth:n[l]})}),this.tabsViewportDataList=t,this.tabsViewportDataList.forEach((e,t)=>this.tabs[t].viewportHidden=e.isTabInViewportHidden),this.isMoreTabMenuVisible=!!this.tabsViewportDataList.find(e=>e.isTabInViewportHidden),this.tabsFilteredAsVisibleList=i.filter((e,t)=>!this.tabsViewportDataList[t].isTabInViewportHidden),this.tabsVisibleIdxHash=this.tabsFilteredAsVisibleList.reduce((e,t,i)=>(e[t.id]=i,e),{}),this.tabsFilteredAsHiddenList=i.filter((e,t)=>this.tabsViewportDataList[t].isTabInViewportHidden),this.tabsHiddenIdxHash=this.tabsFilteredAsHiddenList.reduce((e,t,i)=>(e[t.id]=i,e),{})}}this.updateIsMoreTabMenuSelected();const a=this.tabsFilteredAsHiddenList.find(e=>!e.disabled);this.updateHiddenIdPositiveTabIndex(a)}}))}updateIsMoreTabMenuSelected(){this.isMoreTabMenuSelected=!!this.tabsFilteredAsHiddenList.find(e=>e.selected)}updateHiddenIdPositiveTabIndex(e){this.tabHiddenIdPositiveTabIndex=e?e.id:void 0}sortTabsAndPanes(){if(!this.tabsOrderPrefsArray.length)return;const e=(e,t)=>{const i=e.getAttribute("name")||"",s=t.getAttribute("name")||"";return this.tabsOrderPrefsArray.indexOf(i)-this.tabsOrderPrefsArray.indexOf(s)};this.tabs.sort(e),this.panels.sort(e)}linkPanelsAndTabs(){return f(this,void 0,void 0,(function*(){this.sortTabsAndPanes();const{tabs:e,panels:t}=this;if(0===e.length||0===t.length)return void console.warn("The tabs or panels count should't be equal zero.");e.length!==t.length&&console.warn(`The amount of tabs (${e.length}) doesn't match the amount of panels (${t.length}).`),e.forEach((e,i)=>{const s=Object(h.nanoid)(10),a="tab_"+s,n="tab_panel_"+s;e.setAttribute("id",a),e.setAttribute("aria-controls",n),e.selected=this.selected===i,"vertical"===this.direction&&(e.vertical=!0);const l=t[i];l?(l.setAttribute("id",n),l.setAttribute("aria-labelledby",a),l.selected=this.selected===i,e.disabled&&(l.hidden=!0,l.selected=!1)):e.disabled=!0});let i=this.selected;for(;i<e.length&&e[i].disabled;)i++;i=i===e.length?0:i,e[i].selected=!0,t[i].selected=!0,this.tabsHash=this.tabs.reduce((e,t)=>(e[t.id]=t,e),{}),this.tabsIdxHash=this.tabs.reduce((e,t,i)=>(e[t.id]=i,e),{})}))}get slotItem(){return this.tabSlotElement}filterSlotted(){return this.tabSlotElement.assignedElements()}handleResize(e){const t=Object.create(null,{handleResize:{get:()=>super.handleResize}});return f(this,void 0,void 0,(function*(){t.handleResize&&t.handleResize.call(this,e),yield this.manageOverflow()}))}getDragDirection(e){return e.from===this.visibleTabsContainerElement&&e.to===this.hiddenTabsContainerElement?"visibleToHidden":e.from===this.visibleTabsContainerElement&&e.to===this.visibleTabsContainerElement?"visibleToVisible":e.from===this.hiddenTabsContainerElement&&e.to===this.visibleTabsContainerElement?"hiddenToVisible":e.from===this.hiddenTabsContainerElement&&e.to===this.hiddenTabsContainerElement?"hiddenToHidden":void 0}makeTabCopyFocus(e){e&&e.focus()}handleTabClick(e){const{id:t}=e.detail;this.handleNewSelectedTab(t)}handleNewSelectedTab(e){const t=this.tabsHash[this.getNormalizedTabId(e)];if(t&&!t.disabled){const e=this.tabsIdxHash[t.id];-1!==e&&this.updateSelectedTab(e);{const e=this.tabsCopyHash[this.getCopyTabId(t)];e&&this.makeTabCopyFocus(e),this.updateHiddenIdPositiveTabIndex(t)}}}handleTabCrossClick(e){const{id:t}=e.detail;this.handleTabCloseEvent(t)}handleTabCloseClick(e){const{id:t}=e.detail;this.handleTabCloseEvent(t)}handleTabCloseEvent(e){var t,i;const s=this.tabsHash[this.getNormalizedTabId(e)];if(s&&!s.disabled&&("auto"===s.closable||"custom"===s.closable)){const s=this.tabsFilteredAsVisibleList.findIndex(t=>this.getNormalizedTabId(t.id)===this.getNormalizedTabId(e));this.tabsFilteredAsVisibleList=this.tabsFilteredAsVisibleList.filter(t=>this.getNormalizedTabId(t.id)!==this.getNormalizedTabId(e)),null===(i=null===(t=this.visibleTabsContainerElement)||void 0===t?void 0:t.querySelector("#"+e))||void 0===i||i.remove(),0!==this.tabsFilteredAsHiddenList.length&&(this.tabsFilteredAsVisibleList.push(this.tabsFilteredAsHiddenList[0]),this.tabsFilteredAsHiddenList.splice(0,1)),0===this.tabsFilteredAsHiddenList.length&&(this.isMoreTabMenuVisible=!1,this.isMoreTabMenuMeasured=!1),this.handleUpdatedSeletedTabAfterCross(s)}}handleUpdatedSeletedTabAfterCross(e){var t;let i=e;for(;i<this.tabsFilteredAsVisibleList.length&&(null===(t=this.tabsFilteredAsVisibleList[i])||void 0===t?void 0:t.disabled);)i++;if(void 0===this.tabsFilteredAsVisibleList[i]||e===this.tabsFilteredAsVisibleList.length)for(i=e-1;i>=0&&this.tabsFilteredAsVisibleList[i].disabled;)i--;if(-1!==i){const e=this.tabs.findIndex(e=>e.id===this.tabsFilteredAsVisibleList[i].id);this.updateSelectedTab(e)}else this.updateSelectedTab(i);this.noTabsVisible=0===this.tabsFilteredAsVisibleList.length&&0===this.tabsFilteredAsHiddenList.length,this.requestUpdate()}updateSelectedTab(e){const{tabs:t,panels:i}=this,s=this.tabs.findIndex(e=>e.hasAttribute("selected"));if(t&&i&&[s,e].forEach(e=>{const s=t[e];s&&s.toggleAttribute("selected");const a=i[e];if(a&&a.toggleAttribute("selected"),s){const e=this.tabsCopyHash[this.getCopyTabId(s)];e?(e.toggleAttribute("selected"),this.isMoreTabMenuSelected=!0):this.isMoreTabMenuSelected=!1}}),e>=0){this.dispatchSelectedChangedEvent(e);const i=("horizontal"===this.direction?[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList]:this.tabs).findIndex(i=>i.id===t[e].id);this.changeSelectedTabIdx(i)}}dispatchSelectedChangedEvent(e){const t=[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList],i=this.tabs[e].id,s=t.findIndex(e=>e.id===i),a=[];t.forEach(e=>{a.push(e.name)}),this.dispatchEvent(new CustomEvent("selected-changed",{detail:{value:s,tabsOrder:a},composed:!0,bubbles:!0}))}changeSelectedTabIdx(e){this.requestUpdate(),this.selected=e,this.updateComplete.then(()=>{var t,i;if(e<this.tabsFilteredAsVisibleList.length){const e=null===(t=this.visibleTabsContainerElement)||void 0===t?void 0:t.children[this.selected];null==e||e.focus()}else{const e=this.selected-this.tabsFilteredAsVisibleList.length,t=null===(i=this.hiddenTabsContainerElement)||void 0===i?void 0:i.children[e];this.moveFocusToTab(t);const s=this.tabsFilteredAsHiddenList[e];!(null==s?void 0:s.disabled)&&this.updateHiddenIdPositiveTabIndex(s)}}),this.updateIsMoreTabMenuSelected(),this.storeSelectedTabIndex(e)}storeSelectedTabIndex(e){this.persistSelection&&this.tabsId&&e>-1&&""!==this.tabsId.trim()&&sessionStorage.setItem(this.tabsId,""+e)}getCurrentIndex(e){var t,i;const s=(null===(t=this.visibleTabsContainerElement)||void 0===t?void 0:t.children.length)||0;for(let t=0;t<s;t++)if((null===(i=this.visibleTabsContainerElement)||void 0===i?void 0:i.children[t].id)===e)return t;return this.tabsVisibleIdxHash[e]}moveFocusToAdjacentTab(e,t){var i;const s=this.getCurrentIndex(e),a=null===(i=this.visibleTabsContainerElement)||void 0===i?void 0:i.children,n=(null==a?void 0:a.length)||0;if(!a||0===n)return;let l=0;"previous"===t?l=0===s?n-1:s-1:"next"===t?l=s===n-1?0:s+1:"fromMoreTabs"===t&&(l=this.selected>=n?0:this.selected),this.moveFocusToTab(a[l])}moveFocusToTab(e){Object(p.setTimeout)(()=>null==e?void 0:e.focus(),0)}handleOverlayClose(){this.menuOverlayElement&&(this.menuOverlayElement.isOpen=!1)}dispatchKeydownEvent(e,t){t&&this.dispatchEvent(new CustomEvent("tab-keydown",{detail:{id:t,key:e.code,ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,altKey:e.altKey,srcEvent:e},bubbles:!0,composed:!0}))}handleTabKeydown(e){var t,i,a,n,l,o;let d;if(e.target!=this&&!this.tabs.find(t=>t.id===e.target.id))return!1;d=e.path?e.path[0].id:e.composedPath()?e.composedPath()[0].id:e.originalTarget.id;const r=this.getNormalizedTabId(d);this.dispatchKeydownEvent(e,r);const b=e.code,{shiftKey:h}=e,c=!!this.isMoreTabMenuVisible&&"tab-more"===r,u=c&&this.isMoreTabMenuVisible?this.moreTabMenuElement:this.tabsHash[this.getNormalizedTabId(r)],p=!this.isMoreTabMenuVisible||u&&this.tabsVisibleIdxHash[u.id]>-1,m=!!this.isMoreTabMenuVisible&&(u&&this.tabsHiddenIdxHash[u.id]>-1),v=this.isMoreTabMenuVisible?this.tabsFilteredAsVisibleList.length-1:this.tabs.length-1,T=this.isMoreTabMenuVisible?this.tabsFilteredAsVisibleList.length:-1,f=this.isMoreTabMenuVisible?this.tabsFilteredAsVisibleList.length+this.tabsFilteredAsHiddenList.length-1:-1;switch(b){case s.b.Tab:c&&!this.isMoreTabMenuOpen&&h&&(e.preventDefault(),this.moveFocusToAdjacentTab(d,"fromMoreTabs"));break;case s.b.End:c||(p?(e.preventDefault(),this.moveFocusToTab(null===(t=this.visibleTabsContainerElement)||void 0===t?void 0:t.children[(null===(i=this.tabsFilteredAsVisibleList)||void 0===i?void 0:i.length)-1])):this.isMoreTabMenuOpen&&(e.preventDefault(),this.moveFocusToTab(null===(a=this.hiddenTabsContainerElement)||void 0===a?void 0:a.children[(null===(n=this.tabsFilteredAsHiddenList)||void 0===n?void 0:n.length)-1])));break;case s.b.Home:p?(e.preventDefault(),this.moveFocusToTab(null===(l=this.visibleTabsContainerElement)||void 0===l?void 0:l.children[0])):this.isMoreTabMenuOpen&&(e.preventDefault(),this.moveFocusToTab(null===(o=this.hiddenTabsContainerElement)||void 0===o?void 0:o.children[0]));break;case s.b.ArrowLeft:c||p&&(e.stopPropagation(),this.moveFocusToAdjacentTab(d,"previous"));break;case s.b.ArrowRight:c||p&&(e.stopPropagation(),this.moveFocusToAdjacentTab(d,"next"));break;case s.b.ArrowUp:if(c);else if(p&&"vertical"===this.direction)e.preventDefault(),this.changeSelectedTabIdx(0===this.selected?v:this.selected-1);else if(m){e.preventDefault();const t=this.selected===T?f:this.selected-1;this.changeSelectedTabIdx(t)}break;case s.b.ArrowDown:if(c);else if(p&&"vertical"===this.direction)e.preventDefault(),this.changeSelectedTabIdx(this.selected===v?0:this.selected+1);else if(m){e.preventDefault();const t=this.selected===f?T:this.selected+1;this.changeSelectedTabIdx(t)}break;case s.b.Enter:case s.b.NumpadEnter:case s.b.Space:if(c){const e=this.tabsFilteredAsHiddenList.filter(e=>!e.disabled),t=e.length?e.find(e=>e.selected)||e[0]:void 0;if(this.updateHiddenIdPositiveTabIndex(t),t){const e=this.tabsIdxHash[this.getNormalizedTabId(t.id)];-1!==e&&this.updateSelectedTab(e)}}else if(u&&!u.disabled){const t=this.tabsIdxHash[this.getNormalizedTabId(u.id)];-1!==t&&(e.preventDefault(),this.updateSelectedTab(t))}}}setupTabsEvents(){this.addEventListener("tab-click",this.handleTabClick),this.addEventListener("tab-cross-click",this.handleTabCrossClick),this.addEventListener("tab-close-click",this.handleTabCloseClick),this.addEventListener("keydown",this.handleTabKeydown),this.addEventListener("clear-tab-order-prefs",this.clearTabOrderPrefs)}teardownTabsEvents(){this.removeEventListener("tab-click",this.handleTabClick),this.removeEventListener("tab-cross-click",this.handleTabCrossClick),this.removeEventListener("tab-close-click",this.handleTabCloseClick),this.removeEventListener("keydown",this.handleTabKeydown),this.removeEventListener("clear-tab-order-prefs",this.clearTabOrderPrefs)}clearTabOrderPrefs(e){const{compUniqueId:t}=e.detail;t===this.compUniqueId&&(localStorage.removeItem(this.tabsId),sessionStorage.removeItem(this.tabsId),localStorage.removeItem(this.compUniqueId),this.tabsOrderPrefsArray=this.defaultTabsOrderArray,this.selected=0,this.initializeTabs(),this.dispatchSelectedChangedEvent(0))}setupPanelsAndTabs(){this.tabSlotElement&&(this.tabs=this.tabSlotElement.assignedElements()),this.panelSlotElement&&(this.panels=this.panelSlotElement.assignedElements()),this.defaultTabsOrderArray=this.tabs.map(e=>e.name)}setupMoreTab(){return f(this,void 0,void 0,(function*(){"vertical"!==this.direction&&this.moreTabMenuElement&&!this.isMoreTabMenuMeasured&&(this.moreTabMenuElement.classList.add("md-menu-overlay__more_tab--measuring"),yield this.moreTabMenuElement.updateComplete,this.moreTabMenuElement.offsetWidth&&(this.moreTabMenuOffsetWidth=this.moreTabMenuElement.offsetWidth,this.isMoreTabMenuMeasured=!0),this.moreTabMenuElement.classList.remove("md-menu-overlay__more_tab--measuring"))}))}initializeSortable(){this.visibleTabsContainerElement&&this.hiddenTabsContainerElement&&(this.visibleTabsSortableInstance=u.a.create(this.visibleTabsContainerElement,this.generateOptions()),this.hiddenTabsSortableInstance=u.a.create(this.hiddenTabsContainerElement,this.generateOptions()))}initializeTabs(){this.tabs=[],this.panels=[],this.tabsFilteredAsVisibleList=[],this.tabsFilteredAsHiddenList=[],this.isMoreTabMenuVisible=!1,this.setupPanelsAndTabs(),this.linkPanelsAndTabs(),this.draggable&&this.initializeSortable(),this.manageOverflow(),this.requestUpdate()}connectedCallback(){var e;if(super.connectedCallback(),this.setupTabsEvents(),this.persistSelection){if(!this.tabsId||""===this.tabsId.trim())return void console.error("Unique tabs-id attribute is mandatory for persist the selection of tab ");const e=localStorage.getItem(this.tabsId);this.selected=e&&parseInt(e)>-1?parseInt(e):this.selected}this.compUniqueId&&(this.tabsOrderPrefsArray=(null===(e=localStorage.getItem(this.compUniqueId))||void 0===e?void 0:e.split(","))||[])}selectTabFromStorage(){if(this.persistSelection){if(!this.tabsId||""===this.tabsId.trim())return void console.error("Unique tabs-id attribute is mandatory for persist the selection of tab ");const e=sessionStorage.getItem(this.tabsId);let t=0;if(e){const i=parseInt(e);t=i>-1?i:this.selected}const i=[...this.tabsFilteredAsVisibleList,...this.tabsFilteredAsHiddenList];i.length&&i[t].id?this.handleNewSelectedTab(i[t].id):this.selected=t}}disconnectedCallback(){super.disconnectedCallback(),this.teardownTabsEvents()}firstUpdated(e){super.firstUpdated(e),this.setupPanelsAndTabs(),this.linkPanelsAndTabs(),this.selectTabFromStorage()}updated(e){var t;if(super.updated(e),e.has("slotted")&&this.initializeTabs(),!this.draggable||this.visibleTabsSortableInstance||this.hiddenTabsSortableInstance||this.initializeSortable(),e.has("tabsFilteredAsHiddenList")&&(this.tabsCopy=Array.from((null===(t=this.tabsCopyHiddenListElements)||void 0===t?void 0:t.values())||[]),this.tabsCopyHash=this.tabsCopy.reduce((e,t)=>(e[t.id]=t,e),{})),(e.has("tabsFilteredAsVisibleList")||e.has("tabsFilteredAsHiddenList"))&&(this.tabsVisibleIdxHash=this.tabsFilteredAsVisibleList.reduce((e,t,i)=>(e[t.id]=i,e),{}),this.tabsHiddenIdxHash=this.tabsFilteredAsHiddenList.reduce((e,t,i)=>(e[t.id]=i,e),{})),e.has("isMoreTabMenuOpen")&&this.isMoreTabMenuVisible){const t=e.get("isMoreTabMenuOpen");this.isMoreTabMenuOpen&&!t&&(this.moreItemsScrollLimit<this.tabsCopy.length?(this.isMoreTabMenuScrollable=!0,this.moreTabMenuMaxHeight=this.measureHiddenTabsCopiesOffsetHeight().slice(0,this.moreItemsScrollLimit).reduce((e,t)=>e+=t,0)+"px"):(this.isMoreTabMenuScrollable=!1,this.moreTabMenuMaxHeight=null))}e.has("tabsId")&&this.selectTabFromStorage()}render(){return l.html`
|
|
2
2
|
<div
|
|
3
3
|
part="tabs-list"
|
|
4
4
|
class="md-tab__list ${Object(o.classMap)({"md-tab__justified":this.justified&&!this.isMoreTabMenuVisible,"no-tabs-visible":this.noTabsVisible,"vertical-tab-list":"vertical"===this.direction,"tab-new-momentum":this.newMomentum})}"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@momentum-ui/web-components",
|
|
3
|
-
"version": "2.14.
|
|
3
|
+
"version": "2.14.4",
|
|
4
4
|
"author": "Yana Harris",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "https://github.com/momentum-design/momentum-ui.git",
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"@interactjs/interact": "1.10.3",
|
|
14
14
|
"@interactjs/modifiers": "1.10.3",
|
|
15
15
|
"@interactjs/utils": "1.10.3",
|
|
16
|
-
"@momentum-design/icons": "0.0.
|
|
17
|
-
"@momentum-design/tokens": "0.0.
|
|
16
|
+
"@momentum-design/icons": "0.0.165",
|
|
17
|
+
"@momentum-design/tokens": "0.0.94",
|
|
18
18
|
"@popperjs/core": "^2.4.4",
|
|
19
19
|
"country-codes-list": "1.6.8",
|
|
20
20
|
"country-flags-svg": "1.1.4",
|