@xplortech/apollo-core 1.0.0-beta.4 → 1.0.0-beta.6
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/build/style.css +1 -1
- package/dist/apollo-core/apollo-core.esm.js +1 -1
- package/dist/apollo-core/p-25f84d39.entry.js +1 -0
- package/dist/apollo-core/{p-13e7d3ea.entry.js → p-ee16942f.entry.js} +1 -1
- package/dist/cjs/apollo-core.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/xpl-application-shell.cjs.entry.js +7 -1
- package/dist/cjs/xpl-avatar_12.cjs.entry.js +23 -17
- package/dist/cjs/xpl-dropdown-group_3.cjs.entry.js +4 -1
- package/dist/cjs/xpl-dropdown_2.cjs.entry.js +1 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/xpl-application-shell/xpl-application-shell.js +31 -2
- package/dist/collection/components/xpl-choicelist/choice.js +1 -0
- package/dist/collection/components/xpl-choicelist/xpl-choicelist.js +3 -3
- package/dist/collection/components/xpl-dropdown/dropdownoption.js +1 -0
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js +2 -1
- package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js +4 -1
- package/dist/collection/components/xpl-dropdown/xpl-dropdown.js +16 -8
- package/dist/collection/components/xpl-list/listitem.js +1 -0
- package/dist/collection/components/xpl-list/xpl-list.js +2 -2
- package/dist/collection/components/xpl-select/selectchoice.js +1 -0
- package/dist/collection/components/xpl-select/xpl-select.js +2 -1
- package/dist/collection/components/xpl-table/xpl-table.js +17 -17
- package/dist/collection/components/xpl-utility-bar/xpl-utility-bar.js +27 -1
- package/dist/custom-elements/index.js +37 -23
- package/dist/esm/apollo-core.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/xpl-application-shell.entry.js +7 -1
- package/dist/esm/xpl-avatar_12.entry.js +23 -17
- package/dist/esm/xpl-dropdown-group_3.entry.js +4 -1
- package/dist/esm/xpl-dropdown_2.entry.js +1 -2
- package/dist/stories/application-shell.stories.js +17 -8
- package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/application-shell.stories.d.ts +14 -5
- package/dist/types/components/xpl-application-shell/xpl-application-shell.d.ts +6 -1
- package/dist/types/components/xpl-choicelist/choice.d.ts +5 -5
- package/dist/types/components/xpl-choicelist/xpl-choicelist.d.ts +2 -1
- package/dist/types/components/xpl-dropdown/dropdownoption.d.ts +8 -10
- package/dist/types/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.d.ts +1 -0
- package/dist/types/components/xpl-dropdown/xpl-dropdown.d.ts +6 -4
- package/dist/types/components/xpl-list/listitem.d.ts +15 -19
- package/dist/types/components/xpl-list/xpl-list.d.ts +1 -0
- package/dist/types/components/xpl-select/selectchoice.d.ts +3 -2
- package/dist/types/components/xpl-select/xpl-select.d.ts +1 -0
- package/dist/types/components/xpl-table/xpl-table.d.ts +5 -6
- package/dist/types/components/xpl-utility-bar/xpl-utility-bar.d.ts +5 -0
- package/dist/types/components.d.ts +35 -6
- package/package.json +2 -2
- package/dist/apollo-core/p-97bdb450.entry.js +0 -1
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/avatar.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/backdrop.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/badge.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/breadcrumbs.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/button-row.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/button.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/checkbox.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/choicelist.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/content-area.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/divider.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/dropdown.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/grid.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/input.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/list.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/main-nav.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/pagination.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/radio.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/secondary-nav.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/select.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/table.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/tabs.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/toggle.stories.d.ts +0 -0
- /package/dist/types/Users/{fernandogelin/Projects/apollo-admin/packages → roc/Sites}/apollo/.stencil/stories/utility-bar.stories.d.ts +0 -0
package/build/style.css
CHANGED
|
@@ -1372,7 +1372,7 @@ textarea[class^="xpl-"] {
|
|
|
1372
1372
|
height: 100vh;
|
|
1373
1373
|
}
|
|
1374
1374
|
|
|
1375
|
-
/* Only Firefox (as of 66) support animation of Grid tracks, so we need to apply
|
|
1375
|
+
/* Only Firefox (as of 66) support animation of Grid tracks, so we need to apply animation to the width of the bar. */
|
|
1376
1376
|
|
|
1377
1377
|
.xpl-application-shell__nav--sm,
|
|
1378
1378
|
.xpl-application-shell__nav--md,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-d4aa2fa9.js";(()=>{const a=import.meta.url,
|
|
1
|
+
import{p as e,b as a}from"./p-d4aa2fa9.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((e=>a([["p-bc0ebed2",[[0,"xpl-select",{choices:[16],description:[1],disabled:[4],error:[1],label:[1],mode:[1],placeholder:[1],truncate:[4],active:[32],id:[32],keepFocus:[32],selected:[32],value:[32],displayValue:[32],visibleChoices:[32]}]]],["p-25f84d39",[[4,"xpl-application-shell",{withSubnav:[4,"with-subnav"],withUtility:[4,"with-utility"],navWidth:[1,"nav-width"],isNavOpenAtStartup:[4,"is-nav-open-at-startup"],navOpen:[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["p-ee16942f",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{size:[1]}],[4,"xpl-nav-item",{navControl:[4,"nav-control"]}],[4,"xpl-secondary-nav"],[0,"xpl-table",{columns:[16],data:[16],freeze:[4],multiselect:[4],striped:[4],areAllSelected:[32],rowData:[32],hasScrolled:[32],selected:[32]}],[4,"xpl-utility-bar",{navControl:[4,"nav-control"],isNavOpenAtStartup:[4,"is-nav-open-at-startup"],open:[32]}],[4,"xpl-avatar",{color:[1],disabled:[4],href:[1],name:[1],size:[1],src:[1],status:[1],target:[1]}],[4,"xpl-badge",{dot:[4],variant:[1]}],[4,"xpl-button",{disabled:[4],link:[4],iconOnly:[4,"icon-only"],fullWidth:[4,"full-width"],name:[1],size:[1],type:[1],value:[1],variant:[1],state:[1]}],[4,"xpl-checkbox",{checked:[4],description:[1],disabled:[4],indeterminate:[4],name:[1],required:[4],styled:[4],value:[1],id:[32]}],[4,"xpl-radio",{checked:[4],description:[1],disabled:[4],name:[1],required:[4],styled:[4],value:[1],id:[32]}]]],["p-db74c99c",[[0,"xpl-choicelist",{choices:[16],description:[1],heading:[1],multi:[4],name:[1],styled:[4],selected:[32]}]]],["p-918b0731",[[0,"xpl-list",{items:[16]}]]],["p-2ce2fe5c",[[0,"xpl-button-row",{primary:[1],secondary:[1],tertiary:[1]}]]],["p-d4e5d3aa",[[4,"xpl-divider",{tier:[2]}]]],["p-c8af4ed6",[[0,"xpl-grid"]]],["p-dad11011",[[4,"xpl-grid-item",{xs:[2],sm:[2],md:[2],lg:[2]}]]],["p-63dd9a65",[[0,"xpl-input",{_id:[1],autocomplete:[1],dateFormat:[1,"date-format"],description:[1],disabled:[4],error:[1],label:[1],max:[8],maxCharacterCount:[2,"max-character-count"],min:[8],mode:[1],multiline:[4],name:[1],placeholder:[1],post:[1],pre:[1],readonly:[4],required:[4],step:[2],type:[1],value:[1],characterCount:[32],passwordVisible:[32]}]]],["p-a7cc4114",[[4,"xpl-main-nav",{width:[1]}]]],["p-a43e2d1f",[[0,"xpl-pagination",{total:[2],perPage:[2,"per-page"],waitForCallback:[4,"wait-for-callback"],current:[32],goto:[64]}]]],["p-3ff1ff38",[[0,"xpl-toggle",{checked:[4],description:[1],disabled:[4],heading:[1],label:[1],name:[1],variant:[1],id:[32]}]]],["p-81a6ce4c",[[0,"xpl-backdrop",{relative:[4]}]]],["p-6c3c1e3d",[[4,"xpl-dropdown-group",{groupName:[1,"label"],options:[16]}],[4,"xpl-dropdown-heading",{label:[1]}],[4,"xpl-dropdown-option",{isDisabled:[516,"disabled"],label:[1],isSelected:[1540,"selected"]}]]],["p-b6d1b135",[[4,"xpl-dropdown",{isOpen:[1540,"open"],closeOnSelect:[4,"close-on-select"],mode:[1],options:[16],selectOnFocus:[4,"select-on-focus"],triggerId:[1,"trigger-id"],update:[16],handleSelect:[64]}],[4,"xpl-tag"]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as l,h as i,H as s}from"./p-d4aa2fa9.js";const t=class{constructor(i){l(this,i),this.withSubnav=!1,this.withUtility=!0,this.navWidth="default",this.navOpen=!0}closeNavOnMobile(){window.innerWidth<=640&&(this.navOpen=!1)}navToggleHandler(){this.navOpen=!this.navOpen}navWithHandler(l){this.navWidth=l.detail}onWindowResize(){this.closeNavOnMobile()}connectedCallback(){this.closeNavOnMobile()}componentWillLoad(){this.navOpen=void 0!==this.isNavOpenAtStartup?this.isNavOpenAtStartup:this.navOpen}render(){let l="xpl-application-shell";this.withUtility&&(l+=" xpl-application-shell--with_utility");let t="xpl-application-shell__nav";return t+=this.navOpen?` xpl-application-shell__nav--${this.navWidth}--open`:` xpl-application-shell__nav--${this.navWidth}`,i(s,{class:l},i("div",{class:t},i("slot",{name:"nav"})),i("div",{class:"xpl-application-shell__subnav"},i("slot",{name:"subnav"})),i("div",{class:"xpl-application-shell__utility"},i("slot",{name:"utility"})),i("div",{class:"xpl-application-shell__content"},i("slot",{name:"content"})),i("xpl-backdrop",{onClick:()=>this.navToggleHandler(),class:{"xpl-application-shell__backdrop--open":this.navOpen},relative:!0}))}};export{t as xpl_application_shell}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as s,H as l,g as i,c as
|
|
1
|
+
import{r as t,h as s,H as l,g as i,c as a}from"./p-d4aa2fa9.js";import{v as e}from"./p-ad90fe4d.js";const n=class{constructor(s){t(this,s),this.disabled=!1}render(){let t="xpl-avatar";this.size&&(t+=` xpl-avatar--${this.size}`),this.color&&(t+=` xpl-avatar--${this.color}`);const i=s("div",null,this.src?s("img",{alt:this.name,src:this.src}):s("div",{class:"xpl-avatar__placeholder"},s("slot",null)),this.status&&s("div",{class:`xpl-avatar__dot--${this.status}`}));return s(l,null,this.href&&!this.disabled?s("a",{href:this.href,class:t,target:this.target},i):s("div",this.href&&this.disabled?{class:t+" xpl-avatar--disabled"}:{class:t},i))}},h=class{constructor(s){t(this,s)}render(){let t="xpl-badge";return this.dot&&(t+=" xpl-badge--dot"),this.variant&&(t+=" xpl-badge--"+this.variant),s(l,null,s("div",{class:t},s("slot",null)))}},r=class{constructor(s){t(this,s),this.chevron='<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">\n <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>\n </svg>\n '}render(){return s(l,{class:"xpl-breadcrumb-item",role:"listitem"},s("li",{role:"none"},s("slot",null)),s("span",{innerHTML:`${this.chevron}`}))}},c=class{constructor(s){t(this,s)}render(){return s(l,null,s("nav",{class:"xpl-breadcrumbs","aria-label":"Breadcrumb"},s("ol",{role:"list"},s("slot",null))))}},o=class{constructor(s){t(this,s),this.size="default",this.variant="primary",this.state="neutral"}componentDidRender(){const t=this.el.attributes,s=Object.keys(t).filter((s=>{const l=t[s].name;return!!l&&(l.includes("data-test")||l.includes("aria-"))})).reduce(((s,l)=>Object.assign(Object.assign({},s),{[t[l].name]:t[l].value})),{}),l=this.el.querySelector("button");Object.keys(s).forEach((t=>{l.setAttribute(t,s[t]),this.el.removeAttribute(t)}))}render(){let t=`xpl-button\n xpl-button--${this.size}\n xpl-button--${this.state}\n xpl-button--${this.variant}`;return this.iconOnly&&(t+=" xpl-button--icon-only"),this.fullWidth&&(t+=" xpl-button--full-width"),this.link&&this.disabled&&(t+=" xpl-button--link-disabled"),s(l,{class:t},this.link?s("slot",null):s("button",{disabled:this.disabled,name:this.name,type:this.type,value:this.value},s("slot",null)))}get el(){return i(this)}},d=class{constructor(s){t(this,s),this.checkboxChange=a(this,"checkboxChange",7),this.id=e()}render(){return s(l,{class:{"xpl-checkbox-radio-container":!0,styled:this.styled,disabled:this.disabled}},s("input",{class:"xpl-checkbox",type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,indeterminate:this.indeterminate,onChange:()=>this.checkboxChange.emit(this.input.checked),name:this.name,ref:t=>this.input=t,required:this.required,value:this.value}),s("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},s("slot",null),this.description&&s("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)))}},p=class{constructor(s){t(this,s),this.size="wide"}render(){return s(l,null,s("main",{class:`xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}`},s("div",{class:"xpl-content-area"},s("slot",null))))}},u=class{constructor(s){t(this,s),this.navOpen=a(this,"navOpen",7),this.navControl=!1}onNavToggle(){window.innerWidth<=640&&this.navOpen.emit(!1)}render(){return s(l,{class:"xpl-nav-item",role:"listitem",onClick:()=>{this.navControl&&this.onNavToggle()}},s("slot",{name:"link"},s("slot",{name:"icon"}),s("slot",null)))}},b=class{constructor(s){t(this,s),this.radioChange=a(this,"radioChange",7),this.id=e()}render(){return s(l,{class:{"xpl-checkbox-radio-container":!0,styled:this.styled,disabled:this.disabled}},s("input",{class:"xpl-radio",type:"radio",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name,required:this.required,value:this.value,onChange:()=>this.radioChange.emit(!0)}),s("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},s("slot",null),this.description&&s("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)))}},x=class{constructor(s){t(this,s)}render(){return s(l,{class:"xpl-secondary-nav"},s("nav",{"aria-label":"Secondary Nav"},s("slot",null)))}},v=class{constructor(s){t(this,s),this.tableSelect=a(this,"tableSelect",7),this.areAllSelected=!1,this.hasScrolled=!1,this.selectAll=t=>{const{target:s}=t;if(!(s instanceof HTMLInputElement))return;const{checked:l}=s;this.areAllSelected=l,this.selected=this.selected.map((()=>l)),this.onChange()},this.selectOne=(t,s)=>{const{target:l}=t;if(!(l instanceof HTMLInputElement))return;const{checked:i}=l;this.areAllSelected=!1,this.selected=this.selected.map(((t,l)=>l===s?i:t)),this.onChange()},this.onChange=()=>{this.tableSelect.emit({selected:this.selected,areAllSelected:this.areAllSelected})},this.onScroll=()=>{this.hasScrolled=this.container.scrollLeft>0}}componentWillLoad(){this.areAllSelected=!1,this.rowData=void 0!==this.data?Array.from(this.data):[],this.selected=new Array(this.rowData.length).fill(!1)}render(){let t="xpl-table";return this.striped&&(t+=" xpl-table--striped"),this.freeze&&(t+=" xpl-table--freeze"),this.hasScrolled&&(t+=" xpl-table--has-scrolled"),s(l,null,s("div",{class:"xpl-table-container",onScroll:this.onScroll,ref:t=>this.container=t},s("table",{class:t},this.columns&&s("thead",null,this.columns.map(((t,l)=>s("th",null,this.multiselect&&0===l?s("label",{htmlFor:"__xpl-table-th"},s("input",{checked:this.areAllSelected,id:"__xpl-table-th",indeterminate:!this.areAllSelected&&this.selected.some((t=>t)),onChange:t=>{this.selectAll(t)},type:"checkbox"}),t):t)))),s("tbody",null,this.rowData.map(((t,l)=>s("tr",{class:this.selected&&this.selected[l]?"xpl-table-row-selected":""},t.map(((t,i)=>s("td",null,this.multiselect&&0===i?s("label",{htmlFor:"__xpl-table-row-"+l},s("input",{id:"__xpl-table-row-"+l,checked:this.selected[l],type:"checkbox",onChange:t=>this.selectOne(t,l)}),s("div",{innerHTML:t})):s("div",{innerHTML:t})))))))))))}},m=class{constructor(s){t(this,s),this.navOpen=a(this,"navOpen",7),this.open=!0,this.bars='\n <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14 xpl-utility-nav__bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>\n '}onNavToggle(){this.open=!this.open,this.navOpen.emit(this.open)}componentWillLoad(){this.open=void 0!==this.isNavOpenAtStartup?this.isNavOpenAtStartup:this.open}render(){return s(l,null,s("nav",{"aria-label":"utility navigation bar",class:"xpl-utility-bar"},this.navControl?s("div",null,s("button",{class:"xpl-utility-bar__nav-control",onClick:()=>this.onNavToggle(),innerHTML:`${this.bars}`}),s("slot",{name:"aside"})):s("slot",{name:"aside"}),s("slot",{name:"main"})))}};export{n as xpl_avatar,h as xpl_badge,r as xpl_breadcrumb_item,c as xpl_breadcrumbs,o as xpl_button,d as xpl_checkbox,p as xpl_content_area,u as xpl_nav_item,b as xpl_radio,x as xpl_secondary_nav,v as xpl_table,m as xpl_utility_bar}
|
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["xpl-select.cjs",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell.cjs",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12.cjs",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"open":[32]}],[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist.cjs",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list.cjs",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row.cjs",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider.cjs",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid.cjs",[[0,"xpl-grid"]]],["xpl-grid-item.cjs",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input.cjs",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav.cjs",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination.cjs",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle.cjs",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop.cjs",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3.cjs",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2.cjs",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
|
|
18
|
+
return index.bootstrapLazy([["xpl-select.cjs",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell.cjs",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12.cjs",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"open":[32]}],[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist.cjs",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list.cjs",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row.cjs",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider.cjs",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid.cjs",[[0,"xpl-grid"]]],["xpl-grid-item.cjs",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input.cjs",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav.cjs",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination.cjs",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle.cjs",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop.cjs",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3.cjs",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2.cjs",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
|
|
19
19
|
});
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["xpl-select.cjs",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell.cjs",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12.cjs",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"open":[32]}],[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist.cjs",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list.cjs",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row.cjs",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider.cjs",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid.cjs",[[0,"xpl-grid"]]],["xpl-grid-item.cjs",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input.cjs",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav.cjs",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination.cjs",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle.cjs",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop.cjs",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3.cjs",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2.cjs",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
|
|
17
|
+
return index.bootstrapLazy([["xpl-select.cjs",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"displayValue":[32],"visibleChoices":[32]}]]],["xpl-application-shell.cjs",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]]]],["xpl-avatar_12.cjs",[[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-nav-item",{"navControl":[4,"nav-control"]}],[4,"xpl-secondary-nav"],[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}],[4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"isNavOpenAtStartup":[4,"is-nav-open-at-startup"],"open":[32]}],[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[4,"xpl-badge",{"dot":[4],"variant":[1]}],[4,"xpl-button",{"disabled":[4],"link":[4],"iconOnly":[4,"icon-only"],"fullWidth":[4,"full-width"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1],"state":[1]}],[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]],["xpl-choicelist.cjs",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list.cjs",[[0,"xpl-list",{"items":[16]}]]],["xpl-button-row.cjs",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-divider.cjs",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid.cjs",[[0,"xpl-grid"]]],["xpl-grid-item.cjs",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-input.cjs",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-main-nav.cjs",[[4,"xpl-main-nav",{"width":[1]}]]],["xpl-pagination.cjs",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-toggle.cjs",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-backdrop.cjs",[[0,"xpl-backdrop",{"relative":[4]}]]],["xpl-dropdown-group_3.cjs",[[4,"xpl-dropdown-group",{"groupName":[1,"label"],"options":[16]}],[4,"xpl-dropdown-heading",{"label":[1]}],[4,"xpl-dropdown-option",{"isDisabled":[516,"disabled"],"label":[1],"isSelected":[1540,"selected"]}]]],["xpl-dropdown_2.cjs",[[4,"xpl-dropdown",{"isOpen":[1540,"open"],"closeOnSelect":[4,"close-on-select"],"mode":[1],"options":[16],"selectOnFocus":[4,"select-on-focus"],"triggerId":[1,"trigger-id"],"update":[16],"handleSelect":[64]}],[4,"xpl-tag"]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -20,7 +20,7 @@ const XplApplicationShell = class {
|
|
|
20
20
|
*/
|
|
21
21
|
this.navWidth = 'default';
|
|
22
22
|
/**
|
|
23
|
-
* @state {boolean} - Whether or not the main nav is open, updates when the nav-open
|
|
23
|
+
* @state {boolean} - Whether or not the main nav is open, updates when the nav-open event is emitted.
|
|
24
24
|
*/
|
|
25
25
|
this.navOpen = true;
|
|
26
26
|
}
|
|
@@ -41,6 +41,12 @@ const XplApplicationShell = class {
|
|
|
41
41
|
connectedCallback() {
|
|
42
42
|
this.closeNavOnMobile();
|
|
43
43
|
}
|
|
44
|
+
componentWillLoad() {
|
|
45
|
+
this.navOpen =
|
|
46
|
+
this.isNavOpenAtStartup !== undefined
|
|
47
|
+
? this.isNavOpenAtStartup
|
|
48
|
+
: this.navOpen;
|
|
49
|
+
}
|
|
44
50
|
render() {
|
|
45
51
|
let applicationShellClasses = 'xpl-application-shell';
|
|
46
52
|
if (this.withUtility)
|
|
@@ -235,24 +235,24 @@ const XplTable = class {
|
|
|
235
235
|
this.onScroll = () => {
|
|
236
236
|
this.hasScrolled = this.container.scrollLeft > 0;
|
|
237
237
|
};
|
|
238
|
-
/**
|
|
239
|
-
* TODO: Need to figure out how this interplays with data
|
|
240
|
-
* received from an API/server
|
|
241
|
-
*/
|
|
242
|
-
this.sortBy = (col, ascending = true) => {
|
|
243
|
-
this.rowData.sort((a, b) => {
|
|
244
|
-
const A = a[col];
|
|
245
|
-
const B = b[col];
|
|
246
|
-
if (typeof A === 'number' && typeof B === 'number') {
|
|
247
|
-
const f = ascending ? 1 : -1;
|
|
248
|
-
return A > B ? f : -f;
|
|
249
|
-
}
|
|
250
|
-
return -1;
|
|
251
|
-
});
|
|
252
|
-
this.rowData = Array.from(this.rowData);
|
|
253
|
-
this.render();
|
|
254
|
-
};
|
|
255
238
|
}
|
|
239
|
+
/**
|
|
240
|
+
* TODO: Need to figure out how this interplays with data
|
|
241
|
+
* received from an API/server
|
|
242
|
+
*/
|
|
243
|
+
// private sortBy = (col: number, ascending = true) => {
|
|
244
|
+
// this.rowData.sort((a, b) => {
|
|
245
|
+
// const A = a[col];
|
|
246
|
+
// const B = b[col];
|
|
247
|
+
// if (typeof A === 'number' && typeof B === 'number') {
|
|
248
|
+
// const f = ascending ? 1 : -1;
|
|
249
|
+
// return A > B ? f : -f;
|
|
250
|
+
// }
|
|
251
|
+
// return -1;
|
|
252
|
+
// });
|
|
253
|
+
// this.rowData = Array.from(this.rowData);
|
|
254
|
+
// this.render();
|
|
255
|
+
// };
|
|
256
256
|
componentWillLoad() {
|
|
257
257
|
this.areAllSelected = false;
|
|
258
258
|
this.rowData = this.data !== undefined ? Array.from(this.data) : [];
|
|
@@ -303,6 +303,12 @@ const XplUtilityBar = class {
|
|
|
303
303
|
this.open = !this.open;
|
|
304
304
|
this.navOpen.emit(this.open);
|
|
305
305
|
}
|
|
306
|
+
componentWillLoad() {
|
|
307
|
+
this.open =
|
|
308
|
+
this.isNavOpenAtStartup !== undefined
|
|
309
|
+
? this.isNavOpenAtStartup
|
|
310
|
+
: this.open;
|
|
311
|
+
}
|
|
306
312
|
render() {
|
|
307
313
|
return (index.h(index.Host, null, index.h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (index.h("div", null, index.h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle(), innerHTML: `${this.bars}` }), index.h("slot", { name: "aside" }))) : (index.h("slot", { name: "aside" })), index.h("slot", { name: "main" }))));
|
|
308
314
|
}
|
|
@@ -68,7 +68,10 @@ const XplDropdownOption = class {
|
|
|
68
68
|
const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
|
|
69
69
|
if (selectOnFocus && navigationKeys.includes(ev.key)) {
|
|
70
70
|
const hostElement = document.activeElement.closest('xpl-dropdown-option');
|
|
71
|
-
|
|
71
|
+
const component = {
|
|
72
|
+
component: { hostElement },
|
|
73
|
+
};
|
|
74
|
+
dropdown.handleSelect(ev, component);
|
|
72
75
|
if (mode === 'single' && closeOnSelect)
|
|
73
76
|
this.dropdown.isOpen = false;
|
|
74
77
|
return;
|
|
@@ -20,7 +20,6 @@ const XplDropdown = class {
|
|
|
20
20
|
constructor(hostRef) {
|
|
21
21
|
index.registerInstance(this, hostRef);
|
|
22
22
|
/** text to display as heading */
|
|
23
|
-
// eslint-disable-next-line @stencil/strict-mutable
|
|
24
23
|
this.isOpen = false;
|
|
25
24
|
/** options that are listed */
|
|
26
25
|
this.closeOnSelect = true;
|
|
@@ -37,7 +36,7 @@ const XplDropdown = class {
|
|
|
37
36
|
};
|
|
38
37
|
}
|
|
39
38
|
/**
|
|
40
|
-
* called on dropdown option click and keydown events
|
|
39
|
+
* called on dropdown option click and keydown events to update isSelected states
|
|
41
40
|
*/
|
|
42
41
|
async handleSelect(e, { component }) {
|
|
43
42
|
const { hostElement, mode, options, update } = this;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"entries": [
|
|
3
|
+
"./components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js",
|
|
3
4
|
"./components/xpl-application-shell/xpl-application-shell.js",
|
|
4
5
|
"./components/xpl-avatar/xpl-avatar.js",
|
|
5
6
|
"./components/xpl-backdrop/xpl-backdrop.js",
|
|
@@ -15,7 +16,6 @@
|
|
|
15
16
|
"./components/xpl-dropdown/xpl-dropdown.js",
|
|
16
17
|
"./components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js",
|
|
17
18
|
"./components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js",
|
|
18
|
-
"./components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js",
|
|
19
19
|
"./components/xpl-grid/xpl-grid.js",
|
|
20
20
|
"./components/xpl-grid-item/xpl-grid-item.js",
|
|
21
21
|
"./components/xpl-input/xpl-input.js",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component,
|
|
1
|
+
import { Component, h, Host, Listen, Prop, State } from '@stencil/core';
|
|
2
2
|
export class XplApplicationShell {
|
|
3
3
|
constructor() {
|
|
4
4
|
/**
|
|
@@ -14,7 +14,7 @@ export class XplApplicationShell {
|
|
|
14
14
|
*/
|
|
15
15
|
this.navWidth = 'default';
|
|
16
16
|
/**
|
|
17
|
-
* @state {boolean} - Whether or not the main nav is open, updates when the nav-open
|
|
17
|
+
* @state {boolean} - Whether or not the main nav is open, updates when the nav-open event is emitted.
|
|
18
18
|
*/
|
|
19
19
|
this.navOpen = true;
|
|
20
20
|
}
|
|
@@ -35,6 +35,12 @@ export class XplApplicationShell {
|
|
|
35
35
|
connectedCallback() {
|
|
36
36
|
this.closeNavOnMobile();
|
|
37
37
|
}
|
|
38
|
+
componentWillLoad() {
|
|
39
|
+
this.navOpen =
|
|
40
|
+
this.isNavOpenAtStartup !== undefined
|
|
41
|
+
? this.isNavOpenAtStartup
|
|
42
|
+
: this.navOpen;
|
|
43
|
+
}
|
|
38
44
|
render() {
|
|
39
45
|
let applicationShellClasses = 'xpl-application-shell';
|
|
40
46
|
if (this.withUtility)
|
|
@@ -120,6 +126,29 @@ export class XplApplicationShell {
|
|
|
120
126
|
"attribute": "nav-width",
|
|
121
127
|
"reflect": false,
|
|
122
128
|
"defaultValue": "'default'"
|
|
129
|
+
},
|
|
130
|
+
"isNavOpenAtStartup": {
|
|
131
|
+
"type": "boolean",
|
|
132
|
+
"mutable": false,
|
|
133
|
+
"complexType": {
|
|
134
|
+
"original": "boolean",
|
|
135
|
+
"resolved": "boolean",
|
|
136
|
+
"references": {}
|
|
137
|
+
},
|
|
138
|
+
"required": false,
|
|
139
|
+
"optional": false,
|
|
140
|
+
"docs": {
|
|
141
|
+
"tags": [{
|
|
142
|
+
"text": "{boolean} - *",
|
|
143
|
+
"name": "property"
|
|
144
|
+
}, {
|
|
145
|
+
"text": "{boolean} - Optional property that defines whether or not the main nav is open at startup.",
|
|
146
|
+
"name": "property"
|
|
147
|
+
}],
|
|
148
|
+
"text": ""
|
|
149
|
+
},
|
|
150
|
+
"attribute": "is-nav-open-at-startup",
|
|
151
|
+
"reflect": false
|
|
123
152
|
}
|
|
124
153
|
}; }
|
|
125
154
|
static get states() { return {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference path="./choice.d.ts"></reference>
|
|
2
1
|
import { Component, Host, h, Prop, State } from '@stencil/core';
|
|
3
2
|
export class XplChoicelist {
|
|
4
3
|
componentWillLoad() {
|
|
@@ -47,7 +46,8 @@ export class XplChoicelist {
|
|
|
47
46
|
"resolved": "Choice[]",
|
|
48
47
|
"references": {
|
|
49
48
|
"Choice": {
|
|
50
|
-
"location": "
|
|
49
|
+
"location": "import",
|
|
50
|
+
"path": "./choice"
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
},
|
|
@@ -55,7 +55,7 @@ export class XplChoicelist {
|
|
|
55
55
|
"optional": false,
|
|
56
56
|
"docs": {
|
|
57
57
|
"tags": [],
|
|
58
|
-
"text": "An array of choices to be displayed in the list.\nEach choice should be an object with keys:\n- `checked` [boolean] - whether to
|
|
58
|
+
"text": "An array of choices to be displayed in the list.\nEach choice should be an object with keys:\n- `checked` [boolean] - whether to pre-check or not\n- `children` [Choice[]] - an array of child choices (recursive)\n- `description` [string]\n- `label` [string]"
|
|
59
59
|
}
|
|
60
60
|
},
|
|
61
61
|
"description": {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -23,7 +23,10 @@ export class XplDropdownOption {
|
|
|
23
23
|
const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
|
|
24
24
|
if (selectOnFocus && navigationKeys.includes(ev.key)) {
|
|
25
25
|
const hostElement = document.activeElement.closest('xpl-dropdown-option');
|
|
26
|
-
|
|
26
|
+
const component = {
|
|
27
|
+
component: { hostElement },
|
|
28
|
+
};
|
|
29
|
+
dropdown.handleSelect(ev, component);
|
|
27
30
|
if (mode === 'single' && closeOnSelect)
|
|
28
31
|
this.dropdown.isOpen = false;
|
|
29
32
|
return;
|
|
@@ -13,7 +13,6 @@ import { Component, Element, Host, h, Method, Prop } from '@stencil/core';
|
|
|
13
13
|
export class XplDropdown {
|
|
14
14
|
constructor() {
|
|
15
15
|
/** text to display as heading */
|
|
16
|
-
// eslint-disable-next-line @stencil/strict-mutable
|
|
17
16
|
this.isOpen = false;
|
|
18
17
|
/** options that are listed */
|
|
19
18
|
this.closeOnSelect = true;
|
|
@@ -30,7 +29,7 @@ export class XplDropdown {
|
|
|
30
29
|
};
|
|
31
30
|
}
|
|
32
31
|
/**
|
|
33
|
-
* called on dropdown option click and keydown events
|
|
32
|
+
* called on dropdown option click and keydown events to update isSelected states
|
|
34
33
|
*/
|
|
35
34
|
async handleSelect(e, { component }) {
|
|
36
35
|
const { hostElement, mode, options, update } = this;
|
|
@@ -160,7 +159,8 @@ export class XplDropdown {
|
|
|
160
159
|
"resolved": "Partial<DropdownOption & DropdownOptionGroup>[]",
|
|
161
160
|
"references": {
|
|
162
161
|
"DropdownItem": {
|
|
163
|
-
"location": "
|
|
162
|
+
"location": "import",
|
|
163
|
+
"path": "./dropdownoption"
|
|
164
164
|
}
|
|
165
165
|
}
|
|
166
166
|
},
|
|
@@ -210,11 +210,14 @@ export class XplDropdown {
|
|
|
210
210
|
"type": "unknown",
|
|
211
211
|
"mutable": false,
|
|
212
212
|
"complexType": {
|
|
213
|
-
"original": "(e: Event
|
|
214
|
-
"resolved": "(e: Event, { component
|
|
213
|
+
"original": "(\n e: Event,\n { component }: { component: XplDropdown }\n ) => void",
|
|
214
|
+
"resolved": "(e: Event, { component }: { component: XplDropdown; }) => void",
|
|
215
215
|
"references": {
|
|
216
216
|
"Event": {
|
|
217
217
|
"location": "global"
|
|
218
|
+
},
|
|
219
|
+
"XplDropdown": {
|
|
220
|
+
"location": "global"
|
|
218
221
|
}
|
|
219
222
|
}
|
|
220
223
|
},
|
|
@@ -229,7 +232,7 @@ export class XplDropdown {
|
|
|
229
232
|
static get methods() { return {
|
|
230
233
|
"handleSelect": {
|
|
231
234
|
"complexType": {
|
|
232
|
-
"signature": "(e: Event, { component }: { component:
|
|
235
|
+
"signature": "(e: Event, { component }: { component: XplDropdownOption; }) => Promise<void>",
|
|
233
236
|
"parameters": [{
|
|
234
237
|
"tags": [],
|
|
235
238
|
"text": ""
|
|
@@ -244,14 +247,19 @@ export class XplDropdown {
|
|
|
244
247
|
"Event": {
|
|
245
248
|
"location": "global"
|
|
246
249
|
},
|
|
250
|
+
"XplDropdownOption": {
|
|
251
|
+
"location": "import",
|
|
252
|
+
"path": "./xpl-dropdown-option/xpl-dropdown-option"
|
|
253
|
+
},
|
|
247
254
|
"DropdownItem": {
|
|
248
|
-
"location": "
|
|
255
|
+
"location": "import",
|
|
256
|
+
"path": "./dropdownoption"
|
|
249
257
|
}
|
|
250
258
|
},
|
|
251
259
|
"return": "Promise<void>"
|
|
252
260
|
},
|
|
253
261
|
"docs": {
|
|
254
|
-
"text": "called on dropdown option click and keydown events
|
|
262
|
+
"text": "called on dropdown option click and keydown events to update isSelected states",
|
|
255
263
|
"tags": []
|
|
256
264
|
}
|
|
257
265
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference path="./listitem.d.ts"></reference>
|
|
2
1
|
import { Component, Host, h, Prop, Fragment, } from '@stencil/core';
|
|
3
2
|
import '../../../font-awesome/fontawesome';
|
|
4
3
|
import '../../../font-awesome/regular';
|
|
@@ -75,7 +74,8 @@ export class XplList {
|
|
|
75
74
|
"resolved": "ListItem[]",
|
|
76
75
|
"references": {
|
|
77
76
|
"ListItem": {
|
|
78
|
-
"location": "
|
|
77
|
+
"location": "import",
|
|
78
|
+
"path": "./listitem"
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
},
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -30,24 +30,24 @@ export class XplTable {
|
|
|
30
30
|
this.onScroll = () => {
|
|
31
31
|
this.hasScrolled = this.container.scrollLeft > 0;
|
|
32
32
|
};
|
|
33
|
-
/**
|
|
34
|
-
* TODO: Need to figure out how this interplays with data
|
|
35
|
-
* received from an API/server
|
|
36
|
-
*/
|
|
37
|
-
this.sortBy = (col, ascending = true) => {
|
|
38
|
-
this.rowData.sort((a, b) => {
|
|
39
|
-
const A = a[col];
|
|
40
|
-
const B = b[col];
|
|
41
|
-
if (typeof A === 'number' && typeof B === 'number') {
|
|
42
|
-
const f = ascending ? 1 : -1;
|
|
43
|
-
return A > B ? f : -f;
|
|
44
|
-
}
|
|
45
|
-
return -1;
|
|
46
|
-
});
|
|
47
|
-
this.rowData = Array.from(this.rowData);
|
|
48
|
-
this.render();
|
|
49
|
-
};
|
|
50
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* TODO: Need to figure out how this interplays with data
|
|
36
|
+
* received from an API/server
|
|
37
|
+
*/
|
|
38
|
+
// private sortBy = (col: number, ascending = true) => {
|
|
39
|
+
// this.rowData.sort((a, b) => {
|
|
40
|
+
// const A = a[col];
|
|
41
|
+
// const B = b[col];
|
|
42
|
+
// if (typeof A === 'number' && typeof B === 'number') {
|
|
43
|
+
// const f = ascending ? 1 : -1;
|
|
44
|
+
// return A > B ? f : -f;
|
|
45
|
+
// }
|
|
46
|
+
// return -1;
|
|
47
|
+
// });
|
|
48
|
+
// this.rowData = Array.from(this.rowData);
|
|
49
|
+
// this.render();
|
|
50
|
+
// };
|
|
51
51
|
componentWillLoad() {
|
|
52
52
|
this.areAllSelected = false;
|
|
53
53
|
this.rowData = this.data !== undefined ? Array.from(this.data) : [];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Event,
|
|
1
|
+
import { Component, Event, h, Host, Prop, State, } from '@stencil/core';
|
|
2
2
|
export class XplUtilityBar {
|
|
3
3
|
constructor() {
|
|
4
4
|
this.open = true;
|
|
@@ -10,6 +10,12 @@ export class XplUtilityBar {
|
|
|
10
10
|
this.open = !this.open;
|
|
11
11
|
this.navOpen.emit(this.open);
|
|
12
12
|
}
|
|
13
|
+
componentWillLoad() {
|
|
14
|
+
this.open =
|
|
15
|
+
this.isNavOpenAtStartup !== undefined
|
|
16
|
+
? this.isNavOpenAtStartup
|
|
17
|
+
: this.open;
|
|
18
|
+
}
|
|
13
19
|
render() {
|
|
14
20
|
return (h(Host, null,
|
|
15
21
|
h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" },
|
|
@@ -39,6 +45,26 @@ export class XplUtilityBar {
|
|
|
39
45
|
},
|
|
40
46
|
"attribute": "nav-control",
|
|
41
47
|
"reflect": false
|
|
48
|
+
},
|
|
49
|
+
"isNavOpenAtStartup": {
|
|
50
|
+
"type": "boolean",
|
|
51
|
+
"mutable": false,
|
|
52
|
+
"complexType": {
|
|
53
|
+
"original": "boolean",
|
|
54
|
+
"resolved": "boolean",
|
|
55
|
+
"references": {}
|
|
56
|
+
},
|
|
57
|
+
"required": false,
|
|
58
|
+
"optional": true,
|
|
59
|
+
"docs": {
|
|
60
|
+
"tags": [{
|
|
61
|
+
"text": "{boolean} - Optional property that defines whether or not the main nav is open at startup.",
|
|
62
|
+
"name": "property"
|
|
63
|
+
}],
|
|
64
|
+
"text": ""
|
|
65
|
+
},
|
|
66
|
+
"attribute": "is-nav-open-at-startup",
|
|
67
|
+
"reflect": false
|
|
42
68
|
}
|
|
43
69
|
}; }
|
|
44
70
|
static get states() { return {
|