@limetech/lime-elements 40.6.1 → 40.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/{component-CFk7Dfoi.js → component-Cz24PdGy.js} +3 -3
- package/dist/cjs/{component-BrNWuGdj.js → component-DNiVfYHV.js} +1 -1
- package/dist/cjs/{component-y8swlNNR.js → component-GW2n79GH.js} +1 -1
- package/dist/cjs/{component-UyqdiWGc.js → component-xiw46M1b.js} +1 -1
- package/dist/cjs/{isArrayLikeObject-BhSkOTkw.js → isArrayLikeObject-U2Ddbw4n.js} +0 -17
- package/dist/cjs/{keycodes-k-EdzcMX.js → keycodes-BQ_AERli.js} +4 -0
- package/dist/cjs/limel-breadcrumbs_6.cjs.entry.js +6 -6
- package/dist/cjs/limel-chip-set.cjs.entry.js +5 -5
- package/dist/cjs/limel-chip_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-date-picker.cjs.entry.js +4 -4
- package/dist/cjs/limel-dialog.cjs.entry.js +2 -2
- package/dist/cjs/limel-form.cjs.entry.js +18 -2
- package/dist/cjs/limel-helper-line_3.cjs.entry.js +2 -2
- package/dist/cjs/limel-pagination-jump.cjs.entry.js +1 -1
- package/dist/cjs/limel-picker.cjs.entry.js +1 -1
- package/dist/cjs/limel-popover_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-select.cjs.entry.js +3 -3
- package/dist/cjs/limel-tab-bar.cjs.entry.js +202 -1972
- package/dist/cjs/limel-text-editor-link-menu.cjs.entry.js +1 -1
- package/dist/cjs/{ponyfill-BgIFyUG5.js → ponyfill-CHp7Zocr.js} +0 -1
- package/dist/collection/components/tab-bar/tab-bar.js +61 -46
- package/dist/collection/util/keyboard-navigation.js +144 -0
- package/dist/collection/util/keycodes.js +2 -0
- package/dist/esm/{component-wGVqvUmL.js → component-CVihTrav.js} +3 -3
- package/dist/esm/{component-7QB0OUSF.js → component-CrjPGt1I.js} +1 -1
- package/dist/esm/{component-D4qgwaTf.js → component-CyFeUQ0l.js} +1 -1
- package/dist/esm/{component-B2Vy44Z3.js → component-kP1jCDLp.js} +1 -1
- package/dist/esm/{isArrayLikeObject-tmUOLOWr.js → isArrayLikeObject-CJB8HbtH.js} +1 -17
- package/dist/esm/{keycodes-C4_9qUMP.js → keycodes-DQ5DmW_Y.js} +3 -1
- package/dist/esm/limel-breadcrumbs_6.entry.js +6 -6
- package/dist/esm/limel-chip-set.entry.js +5 -5
- package/dist/esm/limel-chip_2.entry.js +1 -1
- package/dist/esm/limel-date-picker.entry.js +4 -4
- package/dist/esm/limel-dialog.entry.js +2 -2
- package/dist/esm/limel-form.entry.js +17 -1
- package/dist/esm/limel-helper-line_3.entry.js +2 -2
- package/dist/esm/limel-pagination-jump.entry.js +1 -1
- package/dist/esm/limel-picker.entry.js +1 -1
- package/dist/esm/limel-popover_2.entry.js +1 -1
- package/dist/esm/limel-select.entry.js +3 -3
- package/dist/esm/limel-tab-bar.entry.js +202 -1972
- package/dist/esm/limel-text-editor-link-menu.entry.js +1 -1
- package/dist/esm/{ponyfill-ChRGk668.js → ponyfill-6YuZiAPi.js} +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-6adc7c88.entry.js → p-02a06cf7.entry.js} +1 -1
- package/dist/lime-elements/{p-80153f45.entry.js → p-0ece667e.entry.js} +1 -1
- package/dist/lime-elements/p-107654bb.entry.js +13 -0
- package/dist/lime-elements/{p-440a0b43.entry.js → p-120ca628.entry.js} +1 -1
- package/dist/lime-elements/{p-BwJGg-WI.js → p-1CgnIGyd.js} +4 -4
- package/dist/lime-elements/{p-5386c629.entry.js → p-45461ec5.entry.js} +1 -1
- package/dist/lime-elements/{p-8988b7e1.entry.js → p-5e448070.entry.js} +1 -1
- package/dist/lime-elements/{p-ChRGk668.js → p-6YuZiAPi.js} +3 -3
- package/dist/lime-elements/{p-159603cf.entry.js → p-74060535.entry.js} +3 -3
- package/dist/lime-elements/{p-b6c0dc91.entry.js → p-7fa85785.entry.js} +2 -2
- package/dist/lime-elements/p-958396b5.entry.js +1 -0
- package/dist/lime-elements/{p-92669910.entry.js → p-970e0810.entry.js} +1 -1
- package/dist/lime-elements/p-9e084e7c.entry.js +1 -0
- package/dist/lime-elements/{p-BN1-aIOw.js → p-BZXGwiAr.js} +1 -1
- package/dist/lime-elements/{p-DZkKQUDM.js → p-C1FFnUvf.js} +3 -3
- package/dist/lime-elements/{p-C9yTLqR8.js → p-CmtleG1y.js} +1 -1
- package/dist/lime-elements/{p-C4_9qUMP.js → p-DQ5DmW_Y.js} +1 -1
- package/dist/lime-elements/{p-31f314e6.entry.js → p-a42f8c2d.entry.js} +1 -1
- package/dist/lime-elements/{p-f04e2897.entry.js → p-d1b7cc55.entry.js} +1 -1
- package/dist/lime-elements/p-pk5KIdKH.js +1 -0
- package/dist/types/components/tab-bar/tab-bar.d.ts +11 -6
- package/dist/types/components.d.ts +4 -0
- package/dist/types/util/keyboard-navigation.d.ts +105 -0
- package/dist/types/util/keycodes.d.ts +2 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-31226737.entry.js +0 -13
- package/dist/lime-elements/p-4dfd1962.entry.js +0 -67
- package/dist/lime-elements/p-DWMfAkOE.js +0 -1
- package/dist/lime-elements/p-ab8021b9.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as e,c as i,h as t,H as r,a as o}from"./p-BU9IJqli.js";import{I as s}from"./p-N9vxZMhe.js";import{g as a}from"./p-5KsJICvh.js";import{g as l}from"./p-CgNJbSP4.js";import{m as n,r as h}from"./p-CIf8aGSd.js";import{t as c}from"./p-B3YP9GOq.js";import{D as d,B as m}from"./p-C4_9qUMP.js";import{i as p}from"./p-D2VFSWDU.js";import"./p-ChagAaNf.js";import"./p-DK0pjX-Y.js";import"./p-BJQylLSL.js";import"./p-oiMYqRQ0.js";import"./p-BYfPV0O4.js";import"./p-BcJ-TDVt.js";import"./p-DbBZn7JO.js";import"./p-B8VKuhvH.js";const b=class{constructor(r){e(this,r),this.remove=i(this,"remove",7),this.menuItemSelected=i(this,"menuItemSelected",7),this.language="en",this.disabled=!1,this.readonly=!1,this.selected=!1,this.invalid=!1,this.removable=!1,this.type="default",this.loading=!1,this.identifier=crypto.randomUUID(),this.size="default",this.menuItems=[],this.renderAsButton=()=>[t("button",{id:"chip-"+this.identifier,class:"chip",role:"button",disabled:this.disabled||this.readonly,"aria-busy":this.loading?"true":"false","aria-live":"polite",onKeyDown:this.handleDeleteKeyDown},this.renderSpinner(),this.renderPicture(),this.renderLabel(),this.renderBadge(),this.renderProgressBar()),this.renderRemoveButton(),this.renderActionsMenu()],this.renderAsLink=()=>{var e,i;const r=a(null===(e=this.link)||void 0===e?void 0:e.target,null===(i=this.link)||void 0===i?void 0:i.rel);return[t("a",{id:"chip-"+this.identifier,class:"chip",href:this.link.href,title:this.link.title,target:this.link.target,rel:r,"aria-disabled":this.disabled||this.readonly,tabindex:this.disabled||this.readonly?-1:0,onKeyDown:this.handleDeleteKeyDown},this.renderSpinner(),this.renderPicture(),this.renderLabel(),this.renderBadge(),this.renderProgressBar()),this.renderRemoveButton(),this.renderActionsMenu()]},this.renderLabel=()=>t("span",{class:"text"},this.text),this.filterClickWhenDisabled=e=>{(this.disabled||this.readonly)&&e.preventDefault()},this.handleRemoveClick=e=>{e.stopPropagation(),this.remove.emit(this.identifier)},this.handleDeleteKeyDown=e=>{this.removable&&[d,m].includes(e.key)&&this.handleRemoveClick(e)},this.removeChipLabel=()=>`${this.getTranslation("remove")} ${this.text}`,this.actionMenuLabel=()=>this.getTranslation("file-viewer.more-actions"),this.getTranslation=e=>c.get(e,this.language),this.handleActionMenuSelect=e=>{const i=e.detail;i&&("_remove"!==i.value?this.menuItemSelected.emit(i):this.remove.emit(this.identifier))},this.handleActionMenuCancel=e=>{e.stopPropagation()}}componentWillLoad(){n(this.host)}disconnectedCallback(){h(this.host)}render(){return t(r,{key:"9d3e6d04feadd8ce09a34eabc47d0d5648f1df6b",onClick:this.filterClickWhenDisabled},this.link?this.renderAsLink():this.renderAsButton())}renderPicture(){var e,i;const r=l(this.icon);if(r||this.image)return p(this.image)?t("limel-icon",{badge:!0,name:r,style:{color:`${null===(e=this.icon)||void 0===e?void 0:e.color}`,"background-color":`${null===(i=this.icon)||void 0===i?void 0:i.backgroundColor}`}}):t(s,{image:this.image})}renderBadge(){if(this.badge)return t("limel-badge",{label:this.badge})}renderRemoveButton(){var e;if(this.removable&&!this.readonly&&!this.disabled&&!(null===(e=this.menuItems)||void 0===e?void 0:e.length))return t("button",{class:"trailing-button remove-button",tabIndex:-1,"aria-label":this.removeChipLabel(),"aria-controls":"chip-"+this.identifier,innerHTML:'<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-width="2" d="m8 8 16 16M24 8 8 24"/></svg>',onClick:this.handleRemoveClick})}renderActionsMenu(){var e;if(!(null===(e=this.menuItems)||void 0===e?void 0:e.length))return;const i=this.getMenuItems();return t("limel-menu",{items:i,onSelect:this.handleActionMenuSelect,openDirection:"bottom-end",onCancel:this.handleActionMenuCancel},t("button",{slot:"trigger",disabled:this.disabled,class:"trailing-button","aria-label":this.actionMenuLabel(),innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve"><circle fill="currentColor" cx="16" cy="16" r="2"/><circle fill="currentColor" cx="16" cy="24" r="2"/><circle fill="currentColor" cx="16" cy="8" r="2"/></svg>'}))}getMenuItems(){let e=[...this.menuItems];return this.removable&&(e=[...e,{separator:!0},{text:this.removeChipLabel(),icon:{name:"delete_sign",color:"rgb(var(--color-red-default))"},value:"_remove"}]),e}renderSpinner(){if(this.loading)return t("limel-linear-progress",{indeterminate:!0,language:this.language})}renderProgressBar(){if(this.progress)return t("div",{role:"progressbar","aria-label":"%","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.progress,style:{"--limel-chip-progress-percentage":this.progress+"%"}})}static get delegatesFocus(){return!0}get host(){return o(this)}};b.style='@charset "UTF-8";.text{transition:padding-left 0.4s ease}limel-linear-progress{position:absolute;z-index:1;margin:auto;left:0.25rem;width:1.25rem}:host(limel-chip[loading]) .chip:before{content:"";position:absolute;left:0;width:var(--limel-chip-height);height:var(--limel-chip-height);border-radius:50%;scale:0.9;background-color:rgba(var(--contrast-600), 0.8)}:host(limel-chip[loading]) .chip:not(:has(limel-icon)) .text{padding-left:calc(var(--limel-chip-height) + 0.25rem)}div[role=progressbar]{--limel-chip-progressbar-offset:0.1875rem;--limel-chip-progressbar-stripe-color:rgb(var(--contrast-100), 0.3);--limel-chip-progressbar-stripe-size:1.5rem;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:end;inset:var(--limel-chip-progressbar-offset);max-width:calc(100% - var(--limel-chip-progressbar-offset) * 2);border-radius:inherit;background-color:var(--chip-progress-color, rgb(var(--contrast-700)));width:var(--limel-chip-progress-percentage);opacity:0.8;mix-blend-mode:var(--limel-chip-progress-mix-blend-mode)}div[role=progressbar]:after{content:"";transform:translate3d(0, 0, 0);position:absolute;inset:1px;background-image:linear-gradient(-45deg, var(--limel-chip-progressbar-stripe-color) 25%, transparent 25%, transparent 50%, var(--limel-chip-progressbar-stripe-color) 50%, var(--limel-chip-progressbar-stripe-color) 75%, transparent 75%, transparent);z-index:1;background-size:var(--limel-chip-progressbar-stripe-size) var(--limel-chip-progressbar-stripe-size);animation:move 2.5s linear infinite;border-radius:inherit}@media (prefers-reduced-motion){div[role=progressbar]:after{animation:none}}@keyframes move{0%{background-position:0 0}100%{background-position:calc(var(--limel-chip-progressbar-stripe-size) * -1) calc(var(--limel-chip-progressbar-stripe-size) * -1)}}:host(limel-chip){--limel-chip-height:var(--limel-chip-size, 1.75rem);--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center;min-width:0;max-width:min(var(--chip-max-width, 100%), 25rem)}:host(limel-chip)::before{content:"";align-self:baseline;line-height:var(--limel-chip-height);font-size:var(--limel-theme-default-font-size, 0.875rem)}:host(limel-chip[size=small]){--limel-chip-height:1.5rem;--limel-chip-gap:0.25rem}:host(limel-chip[size=small]) .text{font-size:var(--limel-theme-default-small-font-size)}*{box-sizing:border-box}.chip{all:unset;position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:100%;height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:clamp(0.8125rem, var(--limel-chip-height) - 0.875rem, 1rem);padding:0 0.125rem}.chip:has(limel-icon) .text,.chip:has(img) .text{padding-left:0}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):hover,.chip:not([disabled]):focus,.chip:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}.chip:not([disabled]):hover,.chip:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.chip:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}.chip:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.chip:not([disabled]):hover,.chip:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}.chip:has(+limel-menu),.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+limel-menu) .text,.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]:not([disabled=false])) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]:not([readonly=false])) .chip{box-shadow:0 0 0 1px var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5))}:host(limel-chip[selected]:not([selected=false])) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]:not([selected=false])) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]:not([selected=false])) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]:not([selected=false])) .text{color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host([aria-expanded=true]) .chip,:host([aria-expanded]:not([aria-expanded=false])) .chip{box-shadow:var(--button-shadow-inset-pressed) !important}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:"";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[invalid]) .chip{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20viewBox=\'0%200%208%208\'%20style=\'fill-rule:evenodd;\'%3E%3Cpath%20fill=\'rgba(186,186,192,0.16)\'%20d=\'M0%200h4v4H0zM4%204h4v4H4z\'/%3E%3C/svg%3E");background-size:0.5rem;background-color:rgb(var(--color-red-default))}:host(limel-chip[invalid]) .text{color:rgb(var(--color-white))}img,limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem)}img{object-fit:cover;border-radius:50%}limel-icon{padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem;font-size:var(--limel-theme-default-font-size)}button.trailing-button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}button.trailing-button:hover,button.trailing-button:focus,button.trailing-button:focus-visible{will-change:color, background-color, box-shadow, transform}button.trailing-button:hover,button.trailing-button:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button.trailing-button:hover{box-shadow:var(--button-shadow-hovered)}button.trailing-button:active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.trailing-button:hover,button.trailing-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.trailing-button{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:calc(var(--limel-chip-height) * -1 + 0.125rem);margin-right:0.125rem;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);border-radius:50%}button.trailing-button svg{transition:color 0.2s ease, transform 0.2s ease;width:1.25rem}button.trailing-button.remove-button:hover{color:rgb(var(--color-red-dark))}button.trailing-button.remove-button:hover svg{transform:scale(0.8)}limel-menu button[slot=trigger]:focus{outline:none}limel-menu button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-menu[open] button[slot=trigger]{box-shadow:var(--button-shadow-inset)}';const g=class{constructor(i){e(this,i),this.language="en",this.value=0,this.indeterminate=!1}render(){if(!this.isFinite(this.value))return;const e=c.get("loading",this.language),i=c.get("progress-bar",this.language);return t(r,{role:"progressbar","aria-label":this.accessibleLabel||i,"aria-live":"polite","aria-valuemin":"0","aria-valuemax":"1","aria-valuenow":this.indeterminate?void 0:this.value,"aria-valuetext":this.indeterminate?e:void 0,style:{"--percentage":100*this.value+"%"}},t("div",{class:"progress"}))}watchValue(e){this.isFinite(e)&&this.updateProgress(e)}updateProgress(e){this.host&&this.host.style.setProperty("--percentage",100*e+"%")}isFinite(e){return Number.isFinite(e)}get host(){return o(this)}static get watchers(){return{value:[{watchValue:0}]}}};g.style=':host(limel-linear-progress){isolation:isolate;position:relative;overflow:hidden;display:flex;width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--background-color, rgb(var(--contrast-800), 0.5))}.progress{height:100%;width:var(--percentage, 0%);border-radius:0.25rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress{background-color:transparent;width:100%}:host(limel-linear-progress[indeterminate]) .progress:before,:host(limel-linear-progress[indeterminate]) .progress:after{will-change:left, right, opacity;content:"";position:absolute;inset:0;height:100%;border-radius:0.25rem;opacity:0;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress:before{animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}:host(limel-linear-progress[indeterminate]) .progress:after{animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 1.15s}@keyframes indeterminate{0%{left:-35%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:100%;right:-90%}100%{left:100%;right:-90%;opacity:0}}@keyframes indeterminate-short{0%{left:-200%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:107%;right:-8%}100%{left:107%;right:-8%;opacity:0}}';export{b as limel_chip,g as limel_linear_progress}
|
|
1
|
+
import{r as e,c as i,h as t,H as r,a as o}from"./p-BU9IJqli.js";import{I as s}from"./p-N9vxZMhe.js";import{g as a}from"./p-5KsJICvh.js";import{g as l}from"./p-CgNJbSP4.js";import{m as n,r as h}from"./p-CIf8aGSd.js";import{t as c}from"./p-B3YP9GOq.js";import{D as d,B as m}from"./p-DQ5DmW_Y.js";import{i as p}from"./p-D2VFSWDU.js";import"./p-ChagAaNf.js";import"./p-DK0pjX-Y.js";import"./p-BJQylLSL.js";import"./p-oiMYqRQ0.js";import"./p-BYfPV0O4.js";import"./p-BcJ-TDVt.js";import"./p-DbBZn7JO.js";import"./p-B8VKuhvH.js";const b=class{constructor(r){e(this,r),this.remove=i(this,"remove",7),this.menuItemSelected=i(this,"menuItemSelected",7),this.language="en",this.disabled=!1,this.readonly=!1,this.selected=!1,this.invalid=!1,this.removable=!1,this.type="default",this.loading=!1,this.identifier=crypto.randomUUID(),this.size="default",this.menuItems=[],this.renderAsButton=()=>[t("button",{id:"chip-"+this.identifier,class:"chip",role:"button",disabled:this.disabled||this.readonly,"aria-busy":this.loading?"true":"false","aria-live":"polite",onKeyDown:this.handleDeleteKeyDown},this.renderSpinner(),this.renderPicture(),this.renderLabel(),this.renderBadge(),this.renderProgressBar()),this.renderRemoveButton(),this.renderActionsMenu()],this.renderAsLink=()=>{var e,i;const r=a(null===(e=this.link)||void 0===e?void 0:e.target,null===(i=this.link)||void 0===i?void 0:i.rel);return[t("a",{id:"chip-"+this.identifier,class:"chip",href:this.link.href,title:this.link.title,target:this.link.target,rel:r,"aria-disabled":this.disabled||this.readonly,tabindex:this.disabled||this.readonly?-1:0,onKeyDown:this.handleDeleteKeyDown},this.renderSpinner(),this.renderPicture(),this.renderLabel(),this.renderBadge(),this.renderProgressBar()),this.renderRemoveButton(),this.renderActionsMenu()]},this.renderLabel=()=>t("span",{class:"text"},this.text),this.filterClickWhenDisabled=e=>{(this.disabled||this.readonly)&&e.preventDefault()},this.handleRemoveClick=e=>{e.stopPropagation(),this.remove.emit(this.identifier)},this.handleDeleteKeyDown=e=>{this.removable&&[d,m].includes(e.key)&&this.handleRemoveClick(e)},this.removeChipLabel=()=>`${this.getTranslation("remove")} ${this.text}`,this.actionMenuLabel=()=>this.getTranslation("file-viewer.more-actions"),this.getTranslation=e=>c.get(e,this.language),this.handleActionMenuSelect=e=>{const i=e.detail;i&&("_remove"!==i.value?this.menuItemSelected.emit(i):this.remove.emit(this.identifier))},this.handleActionMenuCancel=e=>{e.stopPropagation()}}componentWillLoad(){n(this.host)}disconnectedCallback(){h(this.host)}render(){return t(r,{key:"9d3e6d04feadd8ce09a34eabc47d0d5648f1df6b",onClick:this.filterClickWhenDisabled},this.link?this.renderAsLink():this.renderAsButton())}renderPicture(){var e,i;const r=l(this.icon);if(r||this.image)return p(this.image)?t("limel-icon",{badge:!0,name:r,style:{color:`${null===(e=this.icon)||void 0===e?void 0:e.color}`,"background-color":`${null===(i=this.icon)||void 0===i?void 0:i.backgroundColor}`}}):t(s,{image:this.image})}renderBadge(){if(this.badge)return t("limel-badge",{label:this.badge})}renderRemoveButton(){var e;if(this.removable&&!this.readonly&&!this.disabled&&!(null===(e=this.menuItems)||void 0===e?void 0:e.length))return t("button",{class:"trailing-button remove-button",tabIndex:-1,"aria-label":this.removeChipLabel(),"aria-controls":"chip-"+this.identifier,innerHTML:'<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-width="2" d="m8 8 16 16M24 8 8 24"/></svg>',onClick:this.handleRemoveClick})}renderActionsMenu(){var e;if(!(null===(e=this.menuItems)||void 0===e?void 0:e.length))return;const i=this.getMenuItems();return t("limel-menu",{items:i,onSelect:this.handleActionMenuSelect,openDirection:"bottom-end",onCancel:this.handleActionMenuCancel},t("button",{slot:"trigger",disabled:this.disabled,class:"trailing-button","aria-label":this.actionMenuLabel(),innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve"><circle fill="currentColor" cx="16" cy="16" r="2"/><circle fill="currentColor" cx="16" cy="24" r="2"/><circle fill="currentColor" cx="16" cy="8" r="2"/></svg>'}))}getMenuItems(){let e=[...this.menuItems];return this.removable&&(e=[...e,{separator:!0},{text:this.removeChipLabel(),icon:{name:"delete_sign",color:"rgb(var(--color-red-default))"},value:"_remove"}]),e}renderSpinner(){if(this.loading)return t("limel-linear-progress",{indeterminate:!0,language:this.language})}renderProgressBar(){if(this.progress)return t("div",{role:"progressbar","aria-label":"%","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.progress,style:{"--limel-chip-progress-percentage":this.progress+"%"}})}static get delegatesFocus(){return!0}get host(){return o(this)}};b.style='@charset "UTF-8";.text{transition:padding-left 0.4s ease}limel-linear-progress{position:absolute;z-index:1;margin:auto;left:0.25rem;width:1.25rem}:host(limel-chip[loading]) .chip:before{content:"";position:absolute;left:0;width:var(--limel-chip-height);height:var(--limel-chip-height);border-radius:50%;scale:0.9;background-color:rgba(var(--contrast-600), 0.8)}:host(limel-chip[loading]) .chip:not(:has(limel-icon)) .text{padding-left:calc(var(--limel-chip-height) + 0.25rem)}div[role=progressbar]{--limel-chip-progressbar-offset:0.1875rem;--limel-chip-progressbar-stripe-color:rgb(var(--contrast-100), 0.3);--limel-chip-progressbar-stripe-size:1.5rem;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:end;inset:var(--limel-chip-progressbar-offset);max-width:calc(100% - var(--limel-chip-progressbar-offset) * 2);border-radius:inherit;background-color:var(--chip-progress-color, rgb(var(--contrast-700)));width:var(--limel-chip-progress-percentage);opacity:0.8;mix-blend-mode:var(--limel-chip-progress-mix-blend-mode)}div[role=progressbar]:after{content:"";transform:translate3d(0, 0, 0);position:absolute;inset:1px;background-image:linear-gradient(-45deg, var(--limel-chip-progressbar-stripe-color) 25%, transparent 25%, transparent 50%, var(--limel-chip-progressbar-stripe-color) 50%, var(--limel-chip-progressbar-stripe-color) 75%, transparent 75%, transparent);z-index:1;background-size:var(--limel-chip-progressbar-stripe-size) var(--limel-chip-progressbar-stripe-size);animation:move 2.5s linear infinite;border-radius:inherit}@media (prefers-reduced-motion){div[role=progressbar]:after{animation:none}}@keyframes move{0%{background-position:0 0}100%{background-position:calc(var(--limel-chip-progressbar-stripe-size) * -1) calc(var(--limel-chip-progressbar-stripe-size) * -1)}}:host(limel-chip){--limel-chip-height:var(--limel-chip-size, 1.75rem);--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center;min-width:0;max-width:min(var(--chip-max-width, 100%), 25rem)}:host(limel-chip)::before{content:"";align-self:baseline;line-height:var(--limel-chip-height);font-size:var(--limel-theme-default-font-size, 0.875rem)}:host(limel-chip[size=small]){--limel-chip-height:1.5rem;--limel-chip-gap:0.25rem}:host(limel-chip[size=small]) .text{font-size:var(--limel-theme-default-small-font-size)}*{box-sizing:border-box}.chip{all:unset;position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:100%;height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:clamp(0.8125rem, var(--limel-chip-height) - 0.875rem, 1rem);padding:0 0.125rem}.chip:has(limel-icon) .text,.chip:has(img) .text{padding-left:0}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):hover,.chip:not([disabled]):focus,.chip:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}.chip:not([disabled]):hover,.chip:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.chip:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}.chip:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.chip:not([disabled]):hover,.chip:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}.chip:has(+limel-menu),.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+limel-menu) .text,.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]:not([disabled=false])) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]:not([readonly=false])) .chip{box-shadow:0 0 0 1px var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5))}:host(limel-chip[selected]:not([selected=false])) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]:not([selected=false])) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]:not([selected=false])) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]:not([selected=false])) .text{color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host([aria-expanded=true]) .chip,:host([aria-expanded]:not([aria-expanded=false])) .chip{box-shadow:var(--button-shadow-inset-pressed) !important}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:"";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[invalid]) .chip{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20viewBox=\'0%200%208%208\'%20style=\'fill-rule:evenodd;\'%3E%3Cpath%20fill=\'rgba(186,186,192,0.16)\'%20d=\'M0%200h4v4H0zM4%204h4v4H4z\'/%3E%3C/svg%3E");background-size:0.5rem;background-color:rgb(var(--color-red-default))}:host(limel-chip[invalid]) .text{color:rgb(var(--color-white))}img,limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem)}img{object-fit:cover;border-radius:50%}limel-icon{padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem;font-size:var(--limel-theme-default-font-size)}button.trailing-button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}button.trailing-button:hover,button.trailing-button:focus,button.trailing-button:focus-visible{will-change:color, background-color, box-shadow, transform}button.trailing-button:hover,button.trailing-button:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button.trailing-button:hover{box-shadow:var(--button-shadow-hovered)}button.trailing-button:active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.trailing-button:hover,button.trailing-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.trailing-button{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:calc(var(--limel-chip-height) * -1 + 0.125rem);margin-right:0.125rem;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);border-radius:50%}button.trailing-button svg{transition:color 0.2s ease, transform 0.2s ease;width:1.25rem}button.trailing-button.remove-button:hover{color:rgb(var(--color-red-dark))}button.trailing-button.remove-button:hover svg{transform:scale(0.8)}limel-menu button[slot=trigger]:focus{outline:none}limel-menu button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-menu[open] button[slot=trigger]{box-shadow:var(--button-shadow-inset)}';const g=class{constructor(i){e(this,i),this.language="en",this.value=0,this.indeterminate=!1}render(){if(!this.isFinite(this.value))return;const e=c.get("loading",this.language),i=c.get("progress-bar",this.language);return t(r,{role:"progressbar","aria-label":this.accessibleLabel||i,"aria-live":"polite","aria-valuemin":"0","aria-valuemax":"1","aria-valuenow":this.indeterminate?void 0:this.value,"aria-valuetext":this.indeterminate?e:void 0,style:{"--percentage":100*this.value+"%"}},t("div",{class:"progress"}))}watchValue(e){this.isFinite(e)&&this.updateProgress(e)}updateProgress(e){this.host&&this.host.style.setProperty("--percentage",100*e+"%")}isFinite(e){return Number.isFinite(e)}get host(){return o(this)}static get watchers(){return{value:[{watchValue:0}]}}};g.style=':host(limel-linear-progress){isolation:isolate;position:relative;overflow:hidden;display:flex;width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--background-color, rgb(var(--contrast-800), 0.5))}.progress{height:100%;width:var(--percentage, 0%);border-radius:0.25rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress{background-color:transparent;width:100%}:host(limel-linear-progress[indeterminate]) .progress:before,:host(limel-linear-progress[indeterminate]) .progress:after{will-change:left, right, opacity;content:"";position:absolute;inset:0;height:100%;border-radius:0.25rem;opacity:0;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress:before{animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}:host(limel-linear-progress[indeterminate]) .progress:after{animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 1.15s}@keyframes indeterminate{0%{left:-35%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:100%;right:-90%}100%{left:100%;right:-90%;opacity:0}}@keyframes indeterminate-short{0%{left:-200%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:107%;right:-8%}100%{left:107%;right:-8%;opacity:0}}';export{b as limel_chip,g as limel_linear_progress}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{r as i,c as t,h as o,a as e}from"./p-BU9IJqli.js";import{d as a}from"./p-z_E3sq3p.js";import{c as n}from"./p-BrjD-ITe.js";import{_ as d,a as c,M as r,b as l,c as s,d as m,m as g}from"./p-
|
|
1
|
+
import{r as i,c as t,h as o,a as e}from"./p-BU9IJqli.js";import{d as a}from"./p-z_E3sq3p.js";import{c as n}from"./p-BrjD-ITe.js";import{_ as d,a as c,M as r,b as l,c as s,d as m,m as g}from"./p-6YuZiAPi.js";import{M as h}from"./p-BZXGwiAr.js";import{i as u}from"./p-COdirXg1.js";import"./p-B6-3WXAv.js";import"./p-CZ30nDJE.js";import"./p-DK0pjX-Y.js";import"./p-BJQylLSL.js";import"./p-oiMYqRQ0.js";import"./p-BYfPV0O4.js";import"./p-BcJ-TDVt.js";import"./p-DbBZn7JO.js";import"./p-B8VKuhvH.js";import"./p-B--C3qwe.js";
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2016 Google Inc.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{i as r}from"./p-CK4jS9_E.js";import{d as n}from"./p-9W8bTt2G.js";import{d as t}from"./p-B6-3WXAv.js";import{S as o}from"./p-BJQylLSL.js";import{i}from"./p-DK0pjX-Y.js";import{i as u}from"./p-B8VKuhvH.js";import{i as a}from"./p-BYfPV0O4.js";import{i as e}from"./p-oiMYqRQ0.js";var f,s,c,p=Date.now,m=n?function(r,t){return n(r,"toString",{configurable:!0,enumerable:!1,value:(o=t,function(){return o}),writable:!0});var o}:r,v=(f=m,s=0,c=0,function(){var r=p(),n=16-(r-c);if(c=r,n>0){if(++s>=800)return arguments[0]}else s=0;return f.apply(void 0,arguments)});function j(r){return r!=r}function l(r,n){return!(null==r||!r.length)&&function(r,n){return n==n?function(r,n){for(var t=-1,o=r.length;++t<o;)if(r[t]===n)return t;return-1}(r,n):function(r,n){for(var t=r.length,o=-1;++o<t;)if(n(r[o],o,r))return o;return-1}(r,j)}(r,n)>-1}var b=Math.max;function d(n,t){return v(function(r,n,t){return n=b(void 0===n?r.length-1:n,0),function(){for(var o=arguments,i=-1,u=b(o.length-n,0),a=Array(u);++i<u;)a[i]=o[n+i];i=-1;for(var e=Array(n+1);++i<n;)e[i]=o[i];return e[n]=t(a),function(r,n,t){switch(t.length){case 0:return r.call(n);case 1:return r.call(n,t[0]);case 2:return r.call(n,t[0],t[1]);case 3:return r.call(n,t[0],t[1],t[2])}return r.apply(n,t)}(r,this,e)}}(n,t,r),n+"")}var h=o?o.isConcatSpreadable:void 0;function B(r){return u(r)||i(r)||!!(h&&r&&r[h])}function S(r,n,o,i,u){var a=-1,e=r.length;for(o||(o=B),u||(u=[]);++a<e;){var f=r[a];o(f)&&t(u,f)}return u}function y(r){return e(r)&&a(r)}export{l as a,d as b,S as c,y as i}
|
|
@@ -8,6 +8,7 @@ import { Tab } from './tab.types';
|
|
|
8
8
|
* An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
|
|
9
9
|
* A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
|
|
10
10
|
* The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
|
|
11
|
+
* The left and right arrow keys move to the previous and the next tab, and select it. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
|
|
11
12
|
* :::tip Other things to consider
|
|
12
13
|
* Never divide the content of a tab using a nested tab bar.
|
|
13
14
|
* Never place two tab bars within the same screen.
|
|
@@ -30,20 +31,23 @@ export declare class TabBar {
|
|
|
30
31
|
*/
|
|
31
32
|
private changeTab;
|
|
32
33
|
private host;
|
|
33
|
-
private
|
|
34
|
-
private setupMdc;
|
|
34
|
+
private ripples;
|
|
35
35
|
private revealedTabId?;
|
|
36
36
|
private hasLoaded;
|
|
37
37
|
constructor();
|
|
38
38
|
connectedCallback(): Promise<void>;
|
|
39
39
|
componentDidLoad(): void;
|
|
40
40
|
componentDidRender(): Promise<void>;
|
|
41
|
-
componentDidUpdate(): void;
|
|
42
41
|
disconnectedCallback(): void;
|
|
43
42
|
render(): any;
|
|
44
43
|
protected tabsChanged(newTabs?: Tab[], oldTabs?: Tab[]): void;
|
|
45
|
-
private
|
|
46
|
-
|
|
44
|
+
private getTabElements;
|
|
45
|
+
/**
|
|
46
|
+
* Gives every tab MDC's ripple, which is the feedback when a tab is
|
|
47
|
+
* pressed. Tabs that are gone lose theirs.
|
|
48
|
+
*/
|
|
49
|
+
private updateRipples;
|
|
50
|
+
private destroyRipples;
|
|
47
51
|
/**
|
|
48
52
|
* A tab that is activated by the user has focus, and the scroller reveals
|
|
49
53
|
* what has focus. This is for a tab that becomes active without it.
|
|
@@ -52,7 +56,8 @@ export declare class TabBar {
|
|
|
52
56
|
* scroller glide there.
|
|
53
57
|
*/
|
|
54
58
|
private revealActiveTab;
|
|
55
|
-
private
|
|
59
|
+
private handleKeyDown;
|
|
60
|
+
private activateTab;
|
|
56
61
|
private sortByInactive;
|
|
57
62
|
private renderIcon;
|
|
58
63
|
private renderTab;
|
|
@@ -3825,6 +3825,7 @@ export namespace Components {
|
|
|
3825
3825
|
* An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
|
|
3826
3826
|
* A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
|
|
3827
3827
|
* The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
|
|
3828
|
+
* The left and right arrow keys move to the previous and the next tab, and select it. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
|
|
3828
3829
|
* :::tip Other things to consider
|
|
3829
3830
|
* Never divide the content of a tab using a nested tab bar.
|
|
3830
3831
|
* Never place two tab bars within the same screen.
|
|
@@ -6600,6 +6601,7 @@ declare global {
|
|
|
6600
6601
|
* An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
|
|
6601
6602
|
* A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
|
|
6602
6603
|
* The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
|
|
6604
|
+
* The left and right arrow keys move to the previous and the next tab, and select it. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
|
|
6603
6605
|
* :::tip Other things to consider
|
|
6604
6606
|
* Never divide the content of a tab using a nested tab bar.
|
|
6605
6607
|
* Never place two tab bars within the same screen.
|
|
@@ -10856,6 +10858,7 @@ declare namespace LocalJSX {
|
|
|
10856
10858
|
* An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
|
|
10857
10859
|
* A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
|
|
10858
10860
|
* The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
|
|
10861
|
+
* The left and right arrow keys move to the previous and the next tab, and select it. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
|
|
10859
10862
|
* :::tip Other things to consider
|
|
10860
10863
|
* Never divide the content of a tab using a nested tab bar.
|
|
10861
10864
|
* Never place two tab bars within the same screen.
|
|
@@ -13330,6 +13333,7 @@ declare module "@stencil/core" {
|
|
|
13330
13333
|
* An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
|
|
13331
13334
|
* A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
|
|
13332
13335
|
* The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
|
|
13336
|
+
* The left and right arrow keys move to the previous and the next tab, and select it. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
|
|
13333
13337
|
* :::tip Other things to consider
|
|
13334
13338
|
* Never divide the content of a tab using a nested tab bar.
|
|
13335
13339
|
* Never place two tab bars within the same screen.
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* These helpers implement the keyboard navigation of a row or a column of
|
|
3
|
+
* items, of which only one at a time is in the tab order. That is known as a
|
|
4
|
+
* "roving tabindex": the arrow keys move between the items, Home and End jump
|
|
5
|
+
* to the first and the last one, and Tab leaves the whole group. Tabbing back
|
|
6
|
+
* in lands on the item that was left, since that is the one that is in the tab
|
|
7
|
+
* order.
|
|
8
|
+
*
|
|
9
|
+
* Like the helpers in `typeahead.ts`, everything here is pure and stateless.
|
|
10
|
+
* The component keeps the state, and does the moving itself, since what moving
|
|
11
|
+
* means is not the same everywhere: moving between tabs selects the tab, while
|
|
12
|
+
* moving in a list only moves the focus. The component asks
|
|
13
|
+
* - whether a key press moves at all, with `isNavigationKey`
|
|
14
|
+
* - where it moves to, with `findNavigationTarget`
|
|
15
|
+
* - which item to put in the tab order, with `findTabStop`
|
|
16
|
+
*/
|
|
17
|
+
/**
|
|
18
|
+
* The direction in which the items are laid out. A row is navigated with the
|
|
19
|
+
* left and right arrow keys, and a column with the up and down ones.
|
|
20
|
+
*/
|
|
21
|
+
export type NavigationOrientation = 'horizontal' | 'vertical';
|
|
22
|
+
/**
|
|
23
|
+
* Returned when there is no item to move to.
|
|
24
|
+
*/
|
|
25
|
+
export declare const NO_NAVIGATION_TARGET = -1;
|
|
26
|
+
export interface NavigationOptions<T> {
|
|
27
|
+
/**
|
|
28
|
+
* The direction in which the items are laid out.
|
|
29
|
+
*/
|
|
30
|
+
orientation: NavigationOrientation;
|
|
31
|
+
/**
|
|
32
|
+
* Whether moving past the last item continues at the first one, and
|
|
33
|
+
* moving back from the first item continues at the last one. Without it,
|
|
34
|
+
* moving stops at the ends.
|
|
35
|
+
*/
|
|
36
|
+
wrap?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Tells whether an item cannot be moved to, because it is disabled or is
|
|
39
|
+
* not an item at all, like a separator. Such an item is skipped, but still
|
|
40
|
+
* has its place among the items.
|
|
41
|
+
*/
|
|
42
|
+
isDisabled?: (item: T) => boolean;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Whether a keyboard event is one that moves between the items: an arrow key
|
|
46
|
+
* that goes along the orientation, or Home or End.
|
|
47
|
+
*
|
|
48
|
+
* A key that is pressed with Alt, Ctrl or Cmd is not, since the browser puts
|
|
49
|
+
* those to its own use, such as going back with Alt and the left arrow. Shift
|
|
50
|
+
* is allowed.
|
|
51
|
+
*
|
|
52
|
+
* When this returns `true`, the component should prevent the default action
|
|
53
|
+
* of the event, so that the page does not scroll. Also when there turns out to
|
|
54
|
+
* be nowhere to move to.
|
|
55
|
+
*
|
|
56
|
+
* @param event - the keyboard event to inspect
|
|
57
|
+
* @param options - the same options that are used to move between the items.
|
|
58
|
+
* Only the orientation matters here.
|
|
59
|
+
* @returns `true` when the event is for moving between the items
|
|
60
|
+
*/
|
|
61
|
+
export declare function isNavigationKey(event: KeyboardEvent, options: Pick<NavigationOptions<unknown>, 'orientation'>): boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Find the item that a key press moves to.
|
|
64
|
+
*
|
|
65
|
+
* - The arrow keys that go along the orientation move to the next and the
|
|
66
|
+
* previous item. At the ends they stop, or continue at the other end when
|
|
67
|
+
* `options.wrap` is set.
|
|
68
|
+
* - Home and End move to the first and the last item.
|
|
69
|
+
* - Items that cannot be moved to are skipped.
|
|
70
|
+
* - Without a current item, moving forward starts at the first item, and
|
|
71
|
+
* moving back at the last one.
|
|
72
|
+
*
|
|
73
|
+
* @param items - the items, in the order that they are laid out in. Only their
|
|
74
|
+
* number matters, unless `options.isDisabled` is given.
|
|
75
|
+
* @param key - the `key` of the keyboard event
|
|
76
|
+
* @param currentIndex - the index of the item to move from, usually the one
|
|
77
|
+
* that has focus. Anything outside `items` is treated as "no current item".
|
|
78
|
+
* @param options - which keys move, and how
|
|
79
|
+
* @returns the index of the item to move to. That is `currentIndex` itself
|
|
80
|
+
* when there is nowhere to go from there, since the end is reached and it does
|
|
81
|
+
* not wrap, or since it is the only item that can be moved to. It is
|
|
82
|
+
* `NO_NAVIGATION_TARGET` when the key does not move in this orientation, and
|
|
83
|
+
* when none of the items can be moved to.
|
|
84
|
+
*/
|
|
85
|
+
export declare function findNavigationTarget<T>(items: ReadonlyArray<T>, key: string, currentIndex: number, options: NavigationOptions<T>): number;
|
|
86
|
+
/**
|
|
87
|
+
* Find the item that should be in the tab order, which is the one that Tab
|
|
88
|
+
* lands on when it enters the group. The rest of the items are left out of the
|
|
89
|
+
* tab order, and are reached with the arrow keys.
|
|
90
|
+
*
|
|
91
|
+
* That is the preferred item, if it can be moved to. Otherwise the first item
|
|
92
|
+
* that can.
|
|
93
|
+
*
|
|
94
|
+
* @param items - the items, in the order that they are laid out in. Only their
|
|
95
|
+
* number matters, unless `options.isDisabled` is given.
|
|
96
|
+
* @param preferredIndex - the index of the item that should be in the tab
|
|
97
|
+
* order if possible. For a group with a selection that is the selected item,
|
|
98
|
+
* and otherwise the item that last had focus, which the component has to keep
|
|
99
|
+
* track of. Anything outside `items` means that there is no preference.
|
|
100
|
+
* @param options - the same options that are used to move between the items
|
|
101
|
+
* @returns the index of the item to put in the tab order, or
|
|
102
|
+
* `NO_NAVIGATION_TARGET` when none of the items can be moved to
|
|
103
|
+
*/
|
|
104
|
+
export declare function findTabStop<T>(items: ReadonlyArray<T>, preferredIndex: number, options?: Pick<NavigationOptions<T>, 'isDisabled'>): number;
|
|
105
|
+
//# sourceMappingURL=keyboard-navigation.d.ts.map
|
|
@@ -11,4 +11,6 @@ export declare const ARROW_UP = "ArrowUp";
|
|
|
11
11
|
export declare const ARROW_DOWN = "ArrowDown";
|
|
12
12
|
export declare const ARROW_LEFT = "ArrowLeft";
|
|
13
13
|
export declare const ARROW_RIGHT = "ArrowRight";
|
|
14
|
+
export declare const HOME = "Home";
|
|
15
|
+
export declare const END = "End";
|
|
14
16
|
//# sourceMappingURL=keycodes.d.ts.map
|