@sky.ui/core 0.0.7 → 0.0.20
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 +6 -0
- package/auto-import.js +1 -31
- package/dist/custom-elements.json +7115 -21498
- package/dist/helper/utils/color-resolver.d.ts +12 -0
- package/dist/helper/utils/color-resolver.js +1 -1
- package/dist/helper/utils/color-resolver.js.map +1 -1
- package/dist/index.d.ts +1 -31
- package/dist/index.js +1 -1
- package/dist/sky-alert/sky-alert.js +32 -42
- package/dist/sky-alert/sky-alert.js.map +1 -1
- package/dist/sky-appbar/sky-appbar.d.ts +5 -0
- package/dist/sky-appbar/sky-appbar.js +63 -21
- package/dist/sky-appbar/sky-appbar.js.map +1 -1
- package/dist/sky-avatar/sky-avatar.d.ts +2 -2
- package/dist/sky-avatar/sky-avatar.js +36 -28
- package/dist/sky-avatar/sky-avatar.js.map +1 -1
- package/dist/sky-badge/sky-badge.d.ts +2 -0
- package/dist/sky-badge/sky-badge.js +21 -19
- package/dist/sky-badge/sky-badge.js.map +1 -1
- package/dist/sky-button/sky-button.d.ts +4 -0
- package/dist/sky-button/sky-button.js +85 -26
- package/dist/sky-button/sky-button.js.map +1 -1
- package/dist/sky-card/sky-card.d.ts +7 -1
- package/dist/sky-card/sky-card.js +72 -40
- package/dist/sky-card/sky-card.js.map +1 -1
- package/dist/sky-checkbox/sky-checkbox.js +34 -23
- package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
- package/dist/sky-chip/sky-chip.js +53 -35
- package/dist/sky-chip/sky-chip.js.map +1 -1
- package/dist/sky-combobox/sky-combobox.d.ts +6 -2
- package/dist/sky-combobox/sky-combobox.js +92 -262
- package/dist/sky-combobox/sky-combobox.js.map +1 -1
- package/dist/sky-dialog/sky-dialog.d.ts +4 -11
- package/dist/sky-dialog/sky-dialog.js +78 -131
- package/dist/sky-dialog/sky-dialog.js.map +1 -1
- package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
- package/dist/sky-form/sky-form.js +21 -19
- package/dist/sky-form/sky-form.js.map +1 -1
- package/dist/sky-image/sky-image.d.ts +1 -0
- package/dist/sky-image/sky-image.js +14 -7
- package/dist/sky-image/sky-image.js.map +1 -1
- package/dist/sky-input/sky-input.d.ts +15 -2
- package/dist/sky-input/sky-input.js +188 -193
- package/dist/sky-input/sky-input.js.map +1 -1
- package/dist/sky-list/sky-list.d.ts +11 -2
- package/dist/sky-list/sky-list.js +15 -25
- package/dist/sky-list/sky-list.js.map +1 -1
- package/dist/sky-listitem/sky-listitem.js +62 -30
- package/dist/sky-listitem/sky-listitem.js.map +1 -1
- package/dist/sky-radio/sky-radio.d.ts +2 -0
- package/dist/sky-radio/sky-radio.js +29 -9
- package/dist/sky-radio/sky-radio.js.map +1 -1
- package/dist/sky-sheet/sky-sheet.d.ts +1 -1
- package/dist/sky-sheet/sky-sheet.js +68 -22
- package/dist/sky-sheet/sky-sheet.js.map +1 -1
- package/dist/sky-simple-table/index.d.ts +1 -0
- package/dist/sky-simple-table/index.js +1 -0
- package/dist/sky-simple-table/sky-simple-table.d.ts +68 -0
- package/dist/sky-simple-table/sky-simple-table.js +100 -0
- package/dist/sky-simple-table/sky-simple-table.js.map +1 -0
- package/dist/sky-theme-provider/sky-theme-provider.d.ts +10 -1
- package/dist/sky-theme-provider/sky-theme-provider.js +2 -2
- package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
- package/package.json +39 -269
- package/dist/sky-accordion/index.d.ts +0 -1
- package/dist/sky-accordion/index.js +0 -1
- package/dist/sky-accordion/sky-accordion.d.ts +0 -201
- package/dist/sky-accordion/sky-accordion.js +0 -84
- package/dist/sky-accordion/sky-accordion.js.map +0 -1
- package/dist/sky-accordion-item/index.d.ts +0 -1
- package/dist/sky-accordion-item/index.js +0 -1
- package/dist/sky-accordion-item/sky-accordion-item.d.ts +0 -161
- package/dist/sky-accordion-item/sky-accordion-item.js +0 -191
- package/dist/sky-accordion-item/sky-accordion-item.js.map +0 -1
- package/dist/sky-breadcrumb/index.d.ts +0 -1
- package/dist/sky-breadcrumb/index.js +0 -1
- package/dist/sky-breadcrumb/sky-breadcrumb.d.ts +0 -111
- package/dist/sky-breadcrumb/sky-breadcrumb.js +0 -230
- package/dist/sky-breadcrumb/sky-breadcrumb.js.map +0 -1
- package/dist/sky-button-group/index.d.ts +0 -1
- package/dist/sky-button-group/index.js +0 -1
- package/dist/sky-button-group/sky-button-group.d.ts +0 -93
- package/dist/sky-button-group/sky-button-group.js +0 -281
- package/dist/sky-button-group/sky-button-group.js.map +0 -1
- package/dist/sky-carousel/index.d.ts +0 -1
- package/dist/sky-carousel/index.js +0 -1
- package/dist/sky-carousel/sky-carousel.d.ts +0 -265
- package/dist/sky-carousel/sky-carousel.js +0 -211
- package/dist/sky-carousel/sky-carousel.js.map +0 -1
- package/dist/sky-counter/index.d.ts +0 -1
- package/dist/sky-counter/index.js +0 -1
- package/dist/sky-counter/sky-counter.d.ts +0 -130
- package/dist/sky-counter/sky-counter.js +0 -101
- package/dist/sky-counter/sky-counter.js.map +0 -1
- package/dist/sky-drawer/index.d.ts +0 -1
- package/dist/sky-drawer/index.js +0 -1
- package/dist/sky-drawer/sky-drawer.d.ts +0 -161
- package/dist/sky-drawer/sky-drawer.js +0 -175
- package/dist/sky-drawer/sky-drawer.js.map +0 -1
- package/dist/sky-dropdown/index.d.ts +0 -1
- package/dist/sky-dropdown/index.js +0 -1
- package/dist/sky-dropdown/sky-dropdown.d.ts +0 -254
- package/dist/sky-dropdown/sky-dropdown.js +0 -61
- package/dist/sky-dropdown/sky-dropdown.js.map +0 -1
- package/dist/sky-dropdown-item/index.d.ts +0 -1
- package/dist/sky-dropdown-item/index.js +0 -1
- package/dist/sky-dropdown-item/sky-dropdown-item.d.ts +0 -207
- package/dist/sky-dropdown-item/sky-dropdown-item.js +0 -341
- package/dist/sky-dropdown-item/sky-dropdown-item.js.map +0 -1
- package/dist/sky-flexbar/index.d.ts +0 -1
- package/dist/sky-flexbar/index.js +0 -1
- package/dist/sky-flexbar/sky-flexbar.d.ts +0 -189
- package/dist/sky-flexbar/sky-flexbar.js +0 -157
- package/dist/sky-flexbar/sky-flexbar.js.map +0 -1
- package/dist/sky-flexitem/index.d.ts +0 -1
- package/dist/sky-flexitem/index.js +0 -1
- package/dist/sky-flexitem/sky-flexitem.d.ts +0 -114
- package/dist/sky-flexitem/sky-flexitem.js +0 -52
- package/dist/sky-flexitem/sky-flexitem.js.map +0 -1
- package/dist/sky-navbar/index.d.ts +0 -1
- package/dist/sky-navbar/index.js +0 -1
- package/dist/sky-navbar/sky-navbar.d.ts +0 -211
- package/dist/sky-navbar/sky-navbar.js +0 -521
- package/dist/sky-navbar/sky-navbar.js.map +0 -1
- package/dist/sky-navpanel/index.d.ts +0 -1
- package/dist/sky-navpanel/index.js +0 -1
- package/dist/sky-navpanel/sky-navpanel.d.ts +0 -187
- package/dist/sky-navpanel/sky-navpanel.js +0 -404
- package/dist/sky-navpanel/sky-navpanel.js.map +0 -1
- package/dist/sky-notification/index.d.ts +0 -1
- package/dist/sky-notification/index.js +0 -1
- package/dist/sky-notification/sky-notification.d.ts +0 -152
- package/dist/sky-notification/sky-notification.js +0 -456
- package/dist/sky-notification/sky-notification.js.map +0 -1
- package/dist/sky-otp/index.d.ts +0 -1
- package/dist/sky-otp/index.js +0 -1
- package/dist/sky-otp/sky-otp.d.ts +0 -101
- package/dist/sky-otp/sky-otp.js +0 -96
- package/dist/sky-otp/sky-otp.js.map +0 -1
- package/dist/sky-overlay/index.d.ts +0 -1
- package/dist/sky-overlay/index.js +0 -1
- package/dist/sky-overlay/sky-overlay.d.ts +0 -71
- package/dist/sky-overlay/sky-overlay.js +0 -26
- package/dist/sky-overlay/sky-overlay.js.map +0 -1
- package/dist/sky-pagination/index.d.ts +0 -1
- package/dist/sky-pagination/index.js +0 -1
- package/dist/sky-pagination/sky-pagination.d.ts +0 -167
- package/dist/sky-pagination/sky-pagination.js +0 -453
- package/dist/sky-pagination/sky-pagination.js.map +0 -1
- package/dist/sky-progress/index.d.ts +0 -1
- package/dist/sky-progress/index.js +0 -1
- package/dist/sky-progress/sky-progress.d.ts +0 -70
- package/dist/sky-progress/sky-progress.js +0 -87
- package/dist/sky-progress/sky-progress.js.map +0 -1
- package/dist/sky-radio-group/index.d.ts +0 -1
- package/dist/sky-radio-group/index.js +0 -1
- package/dist/sky-radio-group/sky-radio-group.d.ts +0 -186
- package/dist/sky-radio-group/sky-radio-group.js +0 -239
- package/dist/sky-radio-group/sky-radio-group.js.map +0 -1
- package/dist/sky-range/index.d.ts +0 -1
- package/dist/sky-range/index.js +0 -1
- package/dist/sky-range/sky-range.d.ts +0 -110
- package/dist/sky-range/sky-range.js +0 -196
- package/dist/sky-range/sky-range.js.map +0 -1
- package/dist/sky-serial/index.d.ts +0 -1
- package/dist/sky-serial/index.js +0 -1
- package/dist/sky-serial/sky-serial.d.ts +0 -127
- package/dist/sky-serial/sky-serial.js +0 -133
- package/dist/sky-serial/sky-serial.js.map +0 -1
- package/dist/sky-skeleton/index.d.ts +0 -1
- package/dist/sky-skeleton/index.js +0 -1
- package/dist/sky-skeleton/sky-skeleton.d.ts +0 -80
- package/dist/sky-skeleton/sky-skeleton.js +0 -233
- package/dist/sky-skeleton/sky-skeleton.js.map +0 -1
- package/dist/sky-slider/index.d.ts +0 -1
- package/dist/sky-slider/index.js +0 -1
- package/dist/sky-slider/sky-slider.d.ts +0 -96
- package/dist/sky-slider/sky-slider.js +0 -139
- package/dist/sky-slider/sky-slider.js.map +0 -1
- package/dist/sky-speeddial/index.d.ts +0 -1
- package/dist/sky-speeddial/index.js +0 -1
- package/dist/sky-speeddial/sky-speeddial.d.ts +0 -86
- package/dist/sky-speeddial/sky-speeddial.js +0 -154
- package/dist/sky-speeddial/sky-speeddial.js.map +0 -1
- package/dist/sky-spinner/index.d.ts +0 -1
- package/dist/sky-spinner/index.js +0 -1
- package/dist/sky-spinner/sky-spinner.d.ts +0 -87
- package/dist/sky-spinner/sky-spinner.js +0 -334
- package/dist/sky-spinner/sky-spinner.js.map +0 -1
- package/dist/sky-steps/index.d.ts +0 -1
- package/dist/sky-steps/index.js +0 -1
- package/dist/sky-steps/sky-steps.d.ts +0 -170
- package/dist/sky-steps/sky-steps.js +0 -455
- package/dist/sky-steps/sky-steps.js.map +0 -1
- package/dist/sky-switch/index.d.ts +0 -1
- package/dist/sky-switch/index.js +0 -1
- package/dist/sky-switch/sky-switch.d.ts +0 -116
- package/dist/sky-switch/sky-switch.js +0 -191
- package/dist/sky-switch/sky-switch.js.map +0 -1
- package/dist/sky-tab/index.d.ts +0 -1
- package/dist/sky-tab/index.js +0 -1
- package/dist/sky-tab/sky-tab.d.ts +0 -188
- package/dist/sky-tab/sky-tab.js +0 -390
- package/dist/sky-tab/sky-tab.js.map +0 -1
- package/dist/sky-tab-button/index.d.ts +0 -1
- package/dist/sky-tab-button/index.js +0 -1
- package/dist/sky-tab-button/sky-tab-button.d.ts +0 -114
- package/dist/sky-tab-button/sky-tab-button.js +0 -167
- package/dist/sky-tab-button/sky-tab-button.js.map +0 -1
- package/dist/sky-theme-switcher/index.d.ts +0 -1
- package/dist/sky-theme-switcher/index.js +0 -1
- package/dist/sky-theme-switcher/sky-theme-switcher.d.ts +0 -92
- package/dist/sky-theme-switcher/sky-theme-switcher.js +0 -43
- package/dist/sky-theme-switcher/sky-theme-switcher.js.map +0 -1
- package/dist/sky-tooltip/index.d.ts +0 -1
- package/dist/sky-tooltip/index.js +0 -1
- package/dist/sky-tooltip/sky-tooltip.d.ts +0 -156
- package/dist/sky-tooltip/sky-tooltip.js +0 -242
- package/dist/sky-tooltip/sky-tooltip.js.map +0 -1
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
import{__decorate as e,__metadata as t}from"tslib";import{LitElement as r,css as i,html as s}from"lit";import{property as o,state as a,query as n,customElement as d}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{PopoverController as p}from"../helper/controllers/popover-controller.js";import{SkyIcon as h}from"../sky-icon/sky-icon.js";let c=class extends r{constructor(){super(...arguments),this.isHamburgerOpen=!1,this.isFullyHidden=!1,this.gapThreshold=100,this.flexDirection="horizontal",this.stackAt=500,this.partialIcon="ion:ellipsis-horizontal",this.fullIcon="ion:menu",this._itemElements=[],this._scheduled=!1,this._initialized=!1,this.dropdownPopover=new p(this,{getAnchor:()=>this,getPopover:()=>this.hamburgerEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>"bottom",getAlign:()=>"start",getGap:()=>6,getPadding:()=>8,getMatchAnchorWidth:()=>!0,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>160,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,onOpenChange:(e,t)=>{this.isHamburgerOpen=e,this.dispatchEvent(new CustomEvent("menu-toggle",{detail:{open:e},bubbles:!0,composed:!0}))}})}static{this.dependencies={"sky-icon":h}}static{this.styles=i`
|
|
2
|
-
:host {
|
|
3
|
-
display: flex;
|
|
4
|
-
align-items: center;
|
|
5
|
-
gap: 8px;
|
|
6
|
-
width: 100%;
|
|
7
|
-
position: relative;
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
font-family: var(--sky-font);
|
|
10
|
-
color: var(--sky-text-primary, #000);
|
|
11
|
-
border: var(--sky-border-primary);
|
|
12
|
-
background-color: var(--sky-glass-primary);
|
|
13
|
-
padding: 5px;
|
|
14
|
-
border-radius: var(--sky-radius-secondary);
|
|
15
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
16
|
-
transition: border-radius 0.3s ease;
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
:host::before {
|
|
21
|
-
content: "";
|
|
22
|
-
position: absolute;
|
|
23
|
-
inset: 0;
|
|
24
|
-
z-index: -1;
|
|
25
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
26
|
-
var(--sky-saturation-primary);
|
|
27
|
-
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
28
|
-
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
29
|
-
border-radius: inherit;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.main-container {
|
|
33
|
-
display: flex;
|
|
34
|
-
align-items: center;
|
|
35
|
-
gap: 8px;
|
|
36
|
-
flex: 1;
|
|
37
|
-
min-width: 0;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.main-items {
|
|
41
|
-
display: flex;
|
|
42
|
-
align-items: center;
|
|
43
|
-
gap: 8px;
|
|
44
|
-
flex: 1;
|
|
45
|
-
min-width: 0;
|
|
46
|
-
white-space: nowrap;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
slot:not([name])::slotted(*) {
|
|
50
|
-
white-space: nowrap;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.spacer {
|
|
54
|
-
flex: 1 1 auto;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.hamburger-btn {
|
|
58
|
-
display: none;
|
|
59
|
-
align-items: center;
|
|
60
|
-
justify-content: center;
|
|
61
|
-
cursor: pointer;
|
|
62
|
-
padding: 6px;
|
|
63
|
-
width: 28px;
|
|
64
|
-
height: 28px;
|
|
65
|
-
min-width: 28px;
|
|
66
|
-
min-height: 28px;
|
|
67
|
-
flex: 0 0 auto;
|
|
68
|
-
margin-left: auto;
|
|
69
|
-
line-height: 1;
|
|
70
|
-
font-size: 16px;
|
|
71
|
-
color: var(--sky-text-primary);
|
|
72
|
-
background: var(--sky-hover-primary);
|
|
73
|
-
border: var(--sky-border-primary);
|
|
74
|
-
border-radius: var(--sky-radius-secondary);
|
|
75
|
-
transition:
|
|
76
|
-
background-color 0.2s ease,
|
|
77
|
-
color 0.2s ease;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.hamburger-btn:hover {
|
|
81
|
-
color: var(--sky-active-primary);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
sky-icon {
|
|
85
|
-
display: inline-block;
|
|
86
|
-
width: 1em;
|
|
87
|
-
height: 1em;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.hamburger-menu {
|
|
91
|
-
position: fixed;
|
|
92
|
-
top: var(--sky-dd-top);
|
|
93
|
-
left: var(--sky-dd-left);
|
|
94
|
-
width: var(--sky-dd-width);
|
|
95
|
-
margin: 0;
|
|
96
|
-
box-shadow: var(--sky-box-shadow-primary);
|
|
97
|
-
border-radius: var(--sky-radius-secondary);
|
|
98
|
-
background-color: var(--sky-glass-primary);
|
|
99
|
-
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
100
|
-
var(--sky-saturation-primary);
|
|
101
|
-
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
102
|
-
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
103
|
-
border: var(--sky-border-primary);
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.hamburger-inner {
|
|
108
|
-
display: flex;
|
|
109
|
-
flex-wrap: wrap;
|
|
110
|
-
gap: 8px;
|
|
111
|
-
box-sizing: border-box;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
slot[name="hamburger"]::slotted(*) {
|
|
115
|
-
white-space: nowrap;
|
|
116
|
-
}
|
|
117
|
-
`}firstUpdated(e){super.firstUpdated(e),this.dropdownPopover.refreshTargets()}connectedCallback(){super.connectedCallback(),this._ro=new ResizeObserver(()=>this._scheduleMeasure()),this._ro.observe(this),this._mo=new MutationObserver(()=>this._collectItems()),this._mo.observe(this,{childList:!0,subtree:!0}),this._collectItems(),this.updateComplete.then(()=>this._measure())}disconnectedCallback(){super.disconnectedCallback(),this._ro?.disconnect(),this._mo?.disconnect()}_collectItems(){this._itemElements=Array.from(this.querySelectorAll(".menu-parent")),this._scheduleMeasure()}_scheduleMeasure(){this._scheduled||(this._scheduled=!0,requestAnimationFrame(()=>{this._scheduled=!1,this._measure()}))}_measure(){if(0===this._itemElements.length)return;for(const e of this._itemElements)e.removeAttribute("slot");const e=this.getBoundingClientRect().width,t=this.stackAt>0&&e<this.stackAt?"vertical":"horizontal";this._initialized&&t!==this.flexDirection?(this.flexDirection=t,this.dispatchEvent(new CustomEvent("flex-direction-changed",{detail:{flexDirection:t},bubbles:!0,composed:!0}))):this.flexDirection=t;const r=this.shadowRoot?.querySelector(".main-container"),i=this.shadowRoot?.querySelector(".hamburger-btn"),s=i&&i.offsetWidth||28,o=r?r.offsetWidth-this.gapThreshold-(s+8):0;let a=0;const n=[];for(const e of this._itemElements){a+=e.getBoundingClientRect().width,a>o&&n.push(e)}const d=n.length>0;i&&(i.style.display=d?"flex":"none");for(const e of n)e.setAttribute("slot","hamburger");this.isFullyHidden=n.length===this._itemElements.length,d||this.dropdownPopover.closePopover(),this._initialized||(this._initialized=!0)}openMenu(){this.dropdownPopover.openPopover()}closeMenu(){this.dropdownPopover.closePopover()}toggleMenu(){this.dropdownPopover.toggle()}recalculateLayout(){this._measure()}render(){const e="menu-"+(this.id||Math.random().toString(36).slice(2));return s`
|
|
118
|
-
<div class="main-container" part="container">
|
|
119
|
-
<div class="main-items">
|
|
120
|
-
<!-- visible items -->
|
|
121
|
-
<slot></slot>
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
|
-
<div class="spacer"></div>
|
|
125
|
-
|
|
126
|
-
<button
|
|
127
|
-
class="hamburger-btn"
|
|
128
|
-
part="hamburger-button"
|
|
129
|
-
@click=${()=>this.dropdownPopover.toggle()}
|
|
130
|
-
@keydown=${e=>("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.dropdownPopover.toggle())}
|
|
131
|
-
aria-label="More"
|
|
132
|
-
aria-haspopup="menu"
|
|
133
|
-
.aria-expanded=${String(this.isHamburgerOpen)}
|
|
134
|
-
aria-controls=${e}
|
|
135
|
-
tabindex="0"
|
|
136
|
-
>
|
|
137
|
-
${l(this.isFullyHidden,()=>s`<sky-icon icon="${this.fullIcon}"></sky-icon>`,()=>s`<sky-icon icon="${this.partialIcon}"></sky-icon>`)}
|
|
138
|
-
</button>
|
|
139
|
-
</div>
|
|
140
|
-
|
|
141
|
-
<div
|
|
142
|
-
id=${e}
|
|
143
|
-
class="hamburger-menu"
|
|
144
|
-
@toggle=${this.dropdownPopover.onToggle}
|
|
145
|
-
popover="manual"
|
|
146
|
-
part="menu"
|
|
147
|
-
role="menu"
|
|
148
|
-
?inert=${!this.isHamburgerOpen}
|
|
149
|
-
aria-label="Additional menu items"
|
|
150
|
-
>
|
|
151
|
-
<div class="hamburger-inner" part="menu-inner">
|
|
152
|
-
<!-- overflow items (same nodes, just slot="hamburger") -->
|
|
153
|
-
<slot name="hamburger"></slot>
|
|
154
|
-
</div>
|
|
155
|
-
</div>
|
|
156
|
-
`}};e([o({type:Boolean}),t("design:type",Object)],c.prototype,"isHamburgerOpen",void 0),e([o({type:Boolean}),t("design:type",Object)],c.prototype,"isFullyHidden",void 0),e([o({type:Number}),t("design:type",Object)],c.prototype,"gapThreshold",void 0),e([o({type:String,reflect:!0}),t("design:type",String)],c.prototype,"flexDirection",void 0),e([o({type:Number}),t("design:type",Object)],c.prototype,"stackAt",void 0),e([o({type:String}),t("design:type",Object)],c.prototype,"partialIcon",void 0),e([o({type:String}),t("design:type",Object)],c.prototype,"fullIcon",void 0),e([a(),t("design:type",ResizeObserver)],c.prototype,"_ro",void 0),e([a(),t("design:type",Array)],c.prototype,"_itemElements",void 0),e([n(".hamburger-menu"),t("design:type",HTMLElement)],c.prototype,"hamburgerEl",void 0),c=e([d("sky-flexbar")],c);export{c as SkyFlexbar};
|
|
157
|
-
//# sourceMappingURL=sky-flexbar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-flexbar.js","sources":["../../src/sky-flexbar/sky-flexbar.ts"],"sourcesContent":[null],"names":["SkyFlexbar","LitElement","constructor","this","isHamburgerOpen","isFullyHidden","gapThreshold","flexDirection","stackAt","partialIcon","fullIcon","_itemElements","_scheduled","_initialized","dropdownPopover","PopoverController","getAnchor","getPopover","hamburgerEl","cssVarLeft","cssVarTop","cssVarWidth","getPlacement","getAlign","getGap","getPadding","getMatchAnchorWidth","getMaxWidthToViewport","getMaxWidthMode","getFlip","getFlipOrder","getAnimateReposition","getRepositionMs","getCloseOnEscape","getCloseOnOutside","getRestoreFocusOnClose","onOpenChange","open","meta","dispatchEvent","CustomEvent","detail","bubbles","composed","dependencies","SkyIcon","styles","css","firstUpdated","_changedProperties","super","refreshTargets","connectedCallback","_ro","ResizeObserver","_scheduleMeasure","observe","_mo","MutationObserver","_collectItems","childList","subtree","updateComplete","then","_measure","disconnectedCallback","disconnect","Array","from","querySelectorAll","requestAnimationFrame","length","item","removeAttribute","w","getBoundingClientRect","width","newDir","mainContainer","shadowRoot","querySelector","btn","btnWidth","offsetWidth","available","total","hidden","el","push","showHamburger","style","display","setAttribute","closePopover","openMenu","openPopover","closeMenu","toggleMenu","toggle","recalculateLayout","render","menuId","id","Math","random","toString","slice","html","e","key","preventDefault","String","when","onToggle","__decorate","property","type","Boolean","prototype","Number","reflect","state","query","HTMLElement","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sky-flexitem";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-flexitem.js';
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
export type SkyFlexitemDirection = "horizontal" | "vertical";
|
|
3
|
-
export type SkyFlexitemSizeDetail = {
|
|
4
|
-
element: SkyFlexitem;
|
|
5
|
-
width: number;
|
|
6
|
-
height: number;
|
|
7
|
-
flexDirection: SkyFlexitemDirection;
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* @element sky-flexitem
|
|
11
|
-
*
|
|
12
|
-
* @summary Flex item for `sky-flexbar` that adapts orientation and reports size changes.
|
|
13
|
-
*
|
|
14
|
-
* @status stable
|
|
15
|
-
* @since 1.0.0
|
|
16
|
-
*
|
|
17
|
-
* @documentation https://library.sky-ui.com/components/flexbar
|
|
18
|
-
*
|
|
19
|
-
* @slot title - The title/content slot for the flex item.
|
|
20
|
-
* @slot content - The main content slot for the flex item.
|
|
21
|
-
* @slot hamburger - Special slot for hamburger menu context.
|
|
22
|
-
*
|
|
23
|
-
* @property {SkyFlexitemDirection} flexDirection - Layout direction used by the internal item container.
|
|
24
|
-
* @fires {CustomEvent<SkyFlexitemSizeDetail>} flexitem-size - Fired when the component size changes.
|
|
25
|
-
* @method getSize Returns the current element bounding rect.
|
|
26
|
-
* @method isInHamburger Returns whether the item is in hamburger-menu context.
|
|
27
|
-
*
|
|
28
|
-
* @csspart item - The main container element.
|
|
29
|
-
* @csspart in-hamburger - Applied when item is in hamburger menu context.
|
|
30
|
-
* @csspart in-bar - Applied when item is in navigation bar context.
|
|
31
|
-
*
|
|
32
|
-
* @Behavior
|
|
33
|
-
* - Dynamically adjusts layout direction based on parent flex direction
|
|
34
|
-
* - Supports both horizontal and vertical orientations
|
|
35
|
-
* - Automatically reports size changes via ResizeObserver
|
|
36
|
-
* - Responds to flex-direction-changed events from parent components
|
|
37
|
-
* - Provides different styling based on slot assignment (hamburger vs bar)
|
|
38
|
-
*
|
|
39
|
-
* - `title`: Typically used for labels, icons, or short text
|
|
40
|
-
* - `content`: Main content area for longer text or complex content
|
|
41
|
-
* - `hamburger`: Special slot for items within a hamburger menu context
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* ```html
|
|
45
|
-
* <sky-flexitem flexdirection="horizontal">
|
|
46
|
-
* <span slot="title">Item 1</span>
|
|
47
|
-
* <div slot="content">Content for item 1</div>
|
|
48
|
-
* </sky-flexitem>
|
|
49
|
-
* ```
|
|
50
|
-
* ```vue
|
|
51
|
-
* <template>
|
|
52
|
-
* <sky-flexitem flexdirection="horizontal">
|
|
53
|
-
* <span slot="title">Item 1</span>
|
|
54
|
-
* <span slot="content">Content for item 1</span>
|
|
55
|
-
* </sky-flexitem>
|
|
56
|
-
* </template>
|
|
57
|
-
* ```
|
|
58
|
-
* ```jsx
|
|
59
|
-
* export default function Demo() {
|
|
60
|
-
* return (
|
|
61
|
-
* <sky-flexitem flexdirection="horizontal">
|
|
62
|
-
* <span slot="title">Item 1</span>
|
|
63
|
-
* <span slot="content">Content for item 1</span>
|
|
64
|
-
* </sky-flexitem>
|
|
65
|
-
* );
|
|
66
|
-
* }
|
|
67
|
-
* ```
|
|
68
|
-
*/
|
|
69
|
-
export declare class SkyFlexitem extends LitElement {
|
|
70
|
-
/**
|
|
71
|
-
* Layout direction of the flex item.
|
|
72
|
-
* @public
|
|
73
|
-
*/
|
|
74
|
-
flexDirection: SkyFlexitemDirection;
|
|
75
|
-
/**
|
|
76
|
-
* Internal state tracking if item is in hamburger menu.
|
|
77
|
-
* @private
|
|
78
|
-
*/
|
|
79
|
-
private _inHamburger;
|
|
80
|
-
/** @private */
|
|
81
|
-
private _resizeObserver?;
|
|
82
|
-
static styles: import("lit").CSSResult;
|
|
83
|
-
static get observedAttributes(): string[];
|
|
84
|
-
/** @protected */
|
|
85
|
-
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
86
|
-
/**
|
|
87
|
-
* Handles flex direction changes from parent components.
|
|
88
|
-
* @param {Event} e - The flex-direction-changed event
|
|
89
|
-
* @private
|
|
90
|
-
*/
|
|
91
|
-
private _onFlexDir;
|
|
92
|
-
/**
|
|
93
|
-
* Measures and reports the current size of the flex item.
|
|
94
|
-
* @private
|
|
95
|
-
*/
|
|
96
|
-
private _measureAndReportSize;
|
|
97
|
-
/** @protected */
|
|
98
|
-
connectedCallback(): void;
|
|
99
|
-
/** @protected */
|
|
100
|
-
disconnectedCallback(): void;
|
|
101
|
-
/**
|
|
102
|
-
* Gets the current size of the flex item.
|
|
103
|
-
* @returns {DOMRect} The bounding rectangle of the element
|
|
104
|
-
* @public
|
|
105
|
-
*/
|
|
106
|
-
getSize(): DOMRect;
|
|
107
|
-
/**
|
|
108
|
-
* Checks if the item is currently in hamburger menu context.
|
|
109
|
-
* @returns {boolean} True if in hamburger menu
|
|
110
|
-
* @public
|
|
111
|
-
*/
|
|
112
|
-
isInHamburger(): boolean;
|
|
113
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
114
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import{__decorate as e,__metadata as t}from"tslib";import{LitElement as i,css as r,html as s}from"lit";import{property as n,state as o,customElement as l}from"lit/decorators.js";let a=class extends i{constructor(){super(...arguments),this.flexDirection="vertical",this._inHamburger=!1,this._onFlexDir=e=>{const t=e;t.detail&&(this.flexDirection=t.detail.flexDirection)}}static{this.styles=r`
|
|
2
|
-
:host {
|
|
3
|
-
display: block;
|
|
4
|
-
box-sizing: border-box;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.flex-item-container {
|
|
8
|
-
display: flex;
|
|
9
|
-
align-items: center;
|
|
10
|
-
gap: 8px;
|
|
11
|
-
width: 100%;
|
|
12
|
-
height: 100%;
|
|
13
|
-
white-space: nowrap;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
:host([flexdirection="vertical"]) .flex-item-container {
|
|
17
|
-
flex-direction: column;
|
|
18
|
-
align-items: flex-start;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.content {
|
|
22
|
-
display: block;
|
|
23
|
-
flex: 1;
|
|
24
|
-
min-width: 0;
|
|
25
|
-
white-space: nowrap;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
::slotted([slot="title"]),
|
|
29
|
-
::slotted([slot="content"]) {
|
|
30
|
-
white-space: nowrap;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/* RTL support */
|
|
34
|
-
:host([dir="rtl"]) .flex-item-container {
|
|
35
|
-
flex-direction: row-reverse;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:host([dir="rtl"][flexdirection="vertical"]) .flex-item-container {
|
|
39
|
-
align-items: flex-end;
|
|
40
|
-
}
|
|
41
|
-
`}static get observedAttributes(){return[...super.observedAttributes,"slot"]}attributeChangedCallback(e,t,i){super.attributeChangedCallback(e,t,i),"slot"===e&&t!==i&&(this._inHamburger="hamburger"===i,this.requestUpdate())}_measureAndReportSize(){const e=this.offsetWidth,t=this.offsetHeight;this.dispatchEvent(new CustomEvent("flexitem-size",{bubbles:!0,composed:!0,detail:{element:this,width:e,height:t,flexDirection:this.flexDirection}}))}connectedCallback(){super.connectedCallback(),this.classList.add("menu-parent"),this._inHamburger="hamburger"===this.slot,this._resizeObserver=new ResizeObserver(()=>this._measureAndReportSize()),this._resizeObserver.observe(this),this.addEventListener("flex-direction-changed",this._onFlexDir),this.updateComplete.then(()=>this._measureAndReportSize())}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this.removeEventListener("flex-direction-changed",this._onFlexDir)}getSize(){return this.getBoundingClientRect()}isInHamburger(){return this._inHamburger}render(){const e=this._inHamburger?"item in-hamburger":"item in-bar";return s`
|
|
42
|
-
<div
|
|
43
|
-
part=${e}
|
|
44
|
-
class="flex-item-container"
|
|
45
|
-
role="${this._inHamburger?"menuitem":"listitem"}"
|
|
46
|
-
aria-orientation="${this.flexDirection}"
|
|
47
|
-
>
|
|
48
|
-
<slot name="title"></slot>
|
|
49
|
-
<slot name="content" class="content"></slot>
|
|
50
|
-
</div>
|
|
51
|
-
`}};e([n({type:String,reflect:!0}),t("design:type",String)],a.prototype,"flexDirection",void 0),e([o(),t("design:type",Object)],a.prototype,"_inHamburger",void 0),a=e([l("sky-flexitem")],a);export{a as SkyFlexitem};
|
|
52
|
-
//# sourceMappingURL=sky-flexitem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-flexitem.js","sources":["../../src/sky-flexitem/sky-flexitem.ts"],"sourcesContent":[null],"names":["SkyFlexitem","LitElement","constructor","this","flexDirection","_inHamburger","_onFlexDir","e","ce","detail","styles","css","observedAttributes","super","attributeChangedCallback","name","oldVal","newVal","requestUpdate","_measureAndReportSize","width","offsetWidth","height","offsetHeight","dispatchEvent","CustomEvent","bubbles","composed","element","connectedCallback","classList","add","slot","_resizeObserver","ResizeObserver","observe","addEventListener","updateComplete","then","disconnectedCallback","disconnect","removeEventListener","getSize","getBoundingClientRect","isInHamburger","render","partTokens","html","__decorate","property","type","String","reflect","prototype","state","customElement"],"mappings":"kLAwEO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAMLC,KAAAC,cAAsC,WAO9BD,KAAAE,cAAe,EAkEfF,KAAAG,WAAcC,IACpB,MAAMC,EAAKD,EACNC,EAAGC,SACRN,KAAKC,cAAgBI,EAAGC,OAAOL,eAgFnC,QAhJkBD,KAAAO,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwC1B,CAGF,6BAAoBC,GAClB,MAAO,IAAIC,MAAMD,mBAAoB,OACvC,CAGS,wBAAAE,CAAyBC,EAAcC,EAAuBC,GACrEJ,MAAMC,yBAAyBC,EAAMC,EAAQC,GAChC,SAATF,GAAmBC,IAAWC,IAChCd,KAAKE,aAA0B,cAAXY,EACpBd,KAAKe,gBAET,CAiBQ,qBAAAC,GACN,MAAMC,EAAQjB,KAAKkB,YACbC,EAASnB,KAAKoB,aACpBpB,KAAKqB,cACH,IAAIC,YAAmC,gBAAiB,CACtDC,SAAS,EACTC,UAAU,EACVlB,OAAQ,CACNmB,QAASzB,KACTiB,QACAE,SACAlB,cAAeD,KAAKC,iBAI5B,CAGS,iBAAAyB,GACPhB,MAAMgB,oBAEN1B,KAAK2B,UAAUC,IAAI,eAGnB5B,KAAKE,aAA6B,cAAdF,KAAK6B,KAEzB7B,KAAK8B,gBAAkB,IAAIC,eAAe,IAAM/B,KAAKgB,yBACrDhB,KAAK8B,gBAAgBE,QAAQhC,MAE7BA,KAAKiC,iBAAiB,yBAA0BjC,KAAKG,YAErDH,KAAKkC,eAAeC,KAAK,IAAMnC,KAAKgB,wBACtC,CAGS,oBAAAoB,GACP1B,MAAM0B,uBACNpC,KAAK8B,iBAAiBO,aACtBrC,KAAKsC,oBAAoB,yBAA0BtC,KAAKG,WAC1D,CAOO,OAAAoC,GACL,OAAOvC,KAAKwC,uBACd,CAOO,aAAAC,GACL,OAAOzC,KAAKE,YACd,CAES,MAAAwC,GACP,MAAMC,EAAa3C,KAAKE,aAAe,oBAAsB,cAC7D,OAAO0C,CAAI;;eAEAD;;gBAEC3C,KAAKE,aAAe,WAAa;4BACrBF,KAAKC;;;;;KAM/B,GA3JA4C,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,6BACcpD,EAAAqD,UAAA,wBAOzCL,EAAA,CADPM,6BAC4BtD,EAAAqD,UAAA,uBAblBrD,EAAWgD,EAAA,CADvBO,EAAc,iBACFvD"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sky-navbar";
|
package/dist/sky-navbar/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sky-navbar.js';
|
|
@@ -1,211 +0,0 @@
|
|
|
1
|
-
import { LitElement, TemplateResult } from "lit";
|
|
2
|
-
export type NavIcon = string | TemplateResult | HTMLElement | {
|
|
3
|
-
icon: string;
|
|
4
|
-
inline?: boolean;
|
|
5
|
-
flip?: string;
|
|
6
|
-
rotate?: number;
|
|
7
|
-
};
|
|
8
|
-
export type NavAction =
|
|
9
|
-
/** Action identifier — handled via `item-activate`; never executed as code. */
|
|
10
|
-
string | ((ctx: {
|
|
11
|
-
item: NavItem;
|
|
12
|
-
path: string | null;
|
|
13
|
-
host: SkyNavbar;
|
|
14
|
-
event?: Event;
|
|
15
|
-
}) => any);
|
|
16
|
-
export type NavItem = {
|
|
17
|
-
id?: string;
|
|
18
|
-
label?: string;
|
|
19
|
-
sublabel?: string;
|
|
20
|
-
iconL?: NavIcon;
|
|
21
|
-
iconR?: NavIcon;
|
|
22
|
-
disabled?: boolean;
|
|
23
|
-
route?: string;
|
|
24
|
-
submenu?: NavItem[];
|
|
25
|
-
divider?: boolean;
|
|
26
|
-
action?: NavAction;
|
|
27
|
-
};
|
|
28
|
-
export type SkyNavbarItemActivateDetail = {
|
|
29
|
-
item: NavItem;
|
|
30
|
-
path: string | null;
|
|
31
|
-
};
|
|
32
|
-
/**
|
|
33
|
-
* @element sky-navbar
|
|
34
|
-
*
|
|
35
|
-
* @summary Responsive navbar with desktop/mobile layouts, nested menus, and overflow handling.
|
|
36
|
-
*
|
|
37
|
-
* @status stable
|
|
38
|
-
* @since 1.0.0
|
|
39
|
-
*
|
|
40
|
-
* @documentation https://library.sky-ui.com/components/navbar
|
|
41
|
-
* @dependency sky-icon
|
|
42
|
-
* @dependency sky-button
|
|
43
|
-
* @dependency sky-drawer
|
|
44
|
-
* @dependency sky-navpanel
|
|
45
|
-
*
|
|
46
|
-
* @uiVModel activeRoute route-change
|
|
47
|
-
*
|
|
48
|
-
* @slot prepend - Content placed before the navigation items on desktop.
|
|
49
|
-
* @slot append - Content placed after the navigation items on desktop.
|
|
50
|
-
* @slot prepend-mobile - Content placed before navigation items in mobile mode.
|
|
51
|
-
* @slot append-mobile - Content placed after navigation items in mobile mode.
|
|
52
|
-
* @slot header - Header content for mobile drawer.
|
|
53
|
-
* @slot footer - Footer content for mobile drawer.
|
|
54
|
-
*
|
|
55
|
-
* @csspart nav-desktop - Desktop navigation container.
|
|
56
|
-
* @csspart nav-mobile - Mobile navigation container.
|
|
57
|
-
* @csspart nav-bar - Navigation bar container.
|
|
58
|
-
*
|
|
59
|
-
* @property {NavItem[]} items - Full menu item model.
|
|
60
|
-
* @property {string | null} activeRoute - Active route used for highlighting.
|
|
61
|
-
* @property {number} breakpoint - Mobile breakpoint in pixels.
|
|
62
|
-
* @property {boolean} isMobile - Whether the navbar is currently in mobile layout.
|
|
63
|
-
* @property {number} overflowThreshold - Minimum visible desktop items before full overflow mode.
|
|
64
|
-
* @property {string} justifyBar - CSS `justify-content` for the outer bar.
|
|
65
|
-
* @property {string} justifyBarItems - CSS `justify-content` for the main item row.
|
|
66
|
-
* @property {boolean} pwaOverlay - Enables window-controls-overlay placement behavior.
|
|
67
|
-
* @property {boolean} customEvent - Uses item activation events instead of route navigation flow.
|
|
68
|
-
*
|
|
69
|
-
* @fires {CustomEvent<string>} route-change - Dispatched when a route is changed.
|
|
70
|
-
* @fires {CustomEvent<SkyNavbarItemActivateDetail>} item-activate - Dispatched when an item is activated.
|
|
71
|
-
* @method openMenu Opens the mobile drawer menu.
|
|
72
|
-
* @method closeMenu Closes mobile drawer and desktop submenus.
|
|
73
|
-
* @method toggleMenu Toggles mobile drawer menu.
|
|
74
|
-
* @method closeMenus Closes all open menus.
|
|
75
|
-
*
|
|
76
|
-
* @Behavior
|
|
77
|
-
* - Switches desktop/mobile rendering based on viewport width and `breakpoint`.
|
|
78
|
-
* - Mobile menu uses `sky-drawer` + `sky-navpanel` (maps `items` to navpanel rows).
|
|
79
|
-
* - Supports nested submenu navigation with keyboard and pointer interaction.
|
|
80
|
-
* - Applies overflow collapsing when top-level items exceed available space.
|
|
81
|
-
*
|
|
82
|
-
* @example
|
|
83
|
-
* ```html
|
|
84
|
-
* <sky-navbar breakpoint="1024" pwa-overlay>
|
|
85
|
-
* <div slot="prepend">Logo</div>
|
|
86
|
-
* <div slot="append">User Menu</div>
|
|
87
|
-
* </sky-navbar>
|
|
88
|
-
* ```
|
|
89
|
-
* ```vue
|
|
90
|
-
* <template>
|
|
91
|
-
* <sky-navbar :items="items" @route-change="onRouteChange">
|
|
92
|
-
* <div slot="prepend">Logo</div>
|
|
93
|
-
* <div slot="append">User Menu</div>
|
|
94
|
-
* </sky-navbar>
|
|
95
|
-
* </template>
|
|
96
|
-
* ```
|
|
97
|
-
* ```jsx
|
|
98
|
-
* export default function Demo({ items }) {
|
|
99
|
-
* return (
|
|
100
|
-
* <sky-navbar items={items}>
|
|
101
|
-
* <div slot="prepend">Logo</div>
|
|
102
|
-
* <div slot="append">User Menu</div>
|
|
103
|
-
* </sky-navbar>
|
|
104
|
-
* );
|
|
105
|
-
* }
|
|
106
|
-
* ```
|
|
107
|
-
*/
|
|
108
|
-
export declare class SkyNavbar extends LitElement {
|
|
109
|
-
openMenu(): void;
|
|
110
|
-
closeMenu(): void;
|
|
111
|
-
toggleMenu(): void;
|
|
112
|
-
closeMenus(): void;
|
|
113
|
-
static dependencies: Record<string, CustomElementConstructor>;
|
|
114
|
-
/** Full menu model */
|
|
115
|
-
items: NavItem[];
|
|
116
|
-
/** Current active route for styling */
|
|
117
|
-
activeRoute: string | null;
|
|
118
|
-
/** Mobile breakpoint */
|
|
119
|
-
breakpoint: number;
|
|
120
|
-
/** Whether we are in mobile mode */
|
|
121
|
-
isMobile: boolean;
|
|
122
|
-
/** Minimum visible items on desktop before collapsing all into ⋯ */
|
|
123
|
-
overflowThreshold: number;
|
|
124
|
-
justifyBar: string;
|
|
125
|
-
justifyBarItems: string;
|
|
126
|
-
/** Keep existing prop only — no new props added */
|
|
127
|
-
pwaOverlay: boolean;
|
|
128
|
-
/** Desktop open path (topId[/childId[/...]]). Also drives which nested panels are open */
|
|
129
|
-
private activePath;
|
|
130
|
-
private isSubmenuOpen;
|
|
131
|
-
/** Desktop overflow split */
|
|
132
|
-
private visibleItems;
|
|
133
|
-
private overflowItems;
|
|
134
|
-
customEvent: boolean;
|
|
135
|
-
/** Desktop thumb highlight */
|
|
136
|
-
private focusedIndex;
|
|
137
|
-
/** Persist last top submenu host for animated repositioning */
|
|
138
|
-
private lastTopId;
|
|
139
|
-
private lastTopHadSubmenuOpen;
|
|
140
|
-
/** Mobile drawer open */
|
|
141
|
-
private drawerOpen;
|
|
142
|
-
/** Geometry caches for nested flyouts */
|
|
143
|
-
private anchorRects;
|
|
144
|
-
private anchorOffsets;
|
|
145
|
-
private _submenuPosition;
|
|
146
|
-
private static readonly OVERFLOW_ID;
|
|
147
|
-
private barEl;
|
|
148
|
-
/** Non-reactive; avoids Lit change-in-update when toggled during measurement */
|
|
149
|
-
private _isMeasuring;
|
|
150
|
-
private _measurementRequested;
|
|
151
|
-
private _resizeObs?;
|
|
152
|
-
private static _historyPatched;
|
|
153
|
-
private _winResize;
|
|
154
|
-
static styles: import("lit").CSSResult;
|
|
155
|
-
constructor();
|
|
156
|
-
connectedCallback(): void;
|
|
157
|
-
disconnectedCallback(): void;
|
|
158
|
-
private _onGlobalPointerDown;
|
|
159
|
-
private debounce;
|
|
160
|
-
firstUpdated(): void;
|
|
161
|
-
protected willUpdate(changed: Map<string, unknown>): void;
|
|
162
|
-
private _onLocationChange;
|
|
163
|
-
private _syncResponsive;
|
|
164
|
-
private _setRootPadding;
|
|
165
|
-
private _runAction;
|
|
166
|
-
/** Scroll to a hash fragment using a validated element id (never querySelector). */
|
|
167
|
-
private _scrollToHash;
|
|
168
|
-
render(): TemplateResult<1>;
|
|
169
|
-
private _renderDesktopBar;
|
|
170
|
-
private _renderTopButton;
|
|
171
|
-
private _norm;
|
|
172
|
-
private _routeActive;
|
|
173
|
-
private _renderTopPanel;
|
|
174
|
-
private _renderRow;
|
|
175
|
-
private _renderNested;
|
|
176
|
-
private _onDrawerChange;
|
|
177
|
-
private _navIconToString;
|
|
178
|
-
private _itemsHaveAction;
|
|
179
|
-
private _mapNavItemsToSidebarPages;
|
|
180
|
-
private _findNavItem;
|
|
181
|
-
private _mobileNavUsesActions;
|
|
182
|
-
private _onNavpanelRouteChange;
|
|
183
|
-
private _onNavpanelAction;
|
|
184
|
-
private _renderMobile;
|
|
185
|
-
private _onTopEnter;
|
|
186
|
-
private _onTopClick;
|
|
187
|
-
private _onRowEnter;
|
|
188
|
-
private _onRowClick;
|
|
189
|
-
private _navigate;
|
|
190
|
-
private _openTop;
|
|
191
|
-
private _openNested;
|
|
192
|
-
private _collapseTo;
|
|
193
|
-
private _closeAll;
|
|
194
|
-
private _positionNested;
|
|
195
|
-
private _getPanelEl;
|
|
196
|
-
private _cell;
|
|
197
|
-
private _activate;
|
|
198
|
-
/** Lock body scroll when mobile drawer is open. */
|
|
199
|
-
private _lockBodyScroll;
|
|
200
|
-
/** Unlock body scroll when no dialogs/navbars need it anymore. */
|
|
201
|
-
private _unlockBodyScroll;
|
|
202
|
-
private _slug;
|
|
203
|
-
private _path;
|
|
204
|
-
private _ensurePath;
|
|
205
|
-
private _topItems;
|
|
206
|
-
private _shallowEqual;
|
|
207
|
-
private _applyOverflow;
|
|
208
|
-
private _closeMobileOverlay;
|
|
209
|
-
private _measureOverflow;
|
|
210
|
-
private _scheduleMeasureIfNeeded;
|
|
211
|
-
}
|