scb-wc 0.1.4 → 0.1.5
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/README.md +32 -22
- package/bin/scb-wc.mjs +141 -0
- package/index.js +88 -91
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-accordion/scb-accordion-item.js +211 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-accordion/scb-accordion.js +44 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-app-bar/scb-app-bar.js +166 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-avatar/scb-avatar.js +111 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-badge/scb-badge.js +80 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-breadcrumb/scb-breadcrumb-item.js +14 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-breadcrumb/scb-breadcrumb.js +96 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-button/scb-button.js +268 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-calendar/scb-calendar-event.js +6 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-calendar/scb-calendar.js +168 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-calendar-card/scb-calendar-card.js +346 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-card/scb-card.js +761 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-checkbox/scb-checkbox-group.js +33 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-checkbox/scb-checkbox.js +140 -0
- package/mvc/components/{scb-chevron → Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-chevron}/scb-chevron.js +1 -1
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-chip/scb-chip.js +66 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-collapse/scb-collapse.js +89 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-cookies-consent/scb-cookies-consent.js +78 -0
- package/mvc/components/{scb-datepicker → Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-datepicker}/scb-datepicker.js +1 -1
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-dialog/scb-dialog.js +265 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-divider/scb-divider.js +69 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-drawer/scb-drawer.js +128 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-drop-zone/scb-drop-zone.js +555 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-dropdown/scb-dropdown.js +306 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-fab/scb-fab.js +108 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-fact-card/scb-fact-card-content.js +46 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-fact-card/scb-fact-card.js +226 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-footer/scb-footer-section.js +3 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-footer/scb-footer.js +210 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-gallery-grid/scb-gallery-grid.js +131 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-grid/scb-grid-item.js +11 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-grid/scb-grid.js +98 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-grid/scb-stack.js +33 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-header/scb-header-menu-group.js +1 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-header/scb-header-menu-item.js +5 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-header/scb-header-tab.js +5 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-header/scb-header-utility.js +1 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-header/scb-header.js +681 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-horizontal-scroller/scb-horizontal-scroller.js +196 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-icon-button/scb-icon-button.js +171 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-keyfigure-card/scb-keyfigure-card.js +212 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-link/scb-link.js +61 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-list/scb-list-item.js +153 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-list/scb-list.js +26 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-menu/scb-menu-item.js +205 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-menu/scb-menu-section.js +42 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-menu/scb-menu.js +81 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-menu/scb-sub-menu.js +10 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-nav/scb-nav-item.js +28 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-nav/scb-nav.js +104 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-notification-card/scb-notification-card.js +358 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-options-menu/scb-options-menu-item.js +66 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-options-menu/scb-options-menu.js +88 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-options-menu/scb-options-sub-menu.js +34 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-overlay/scb-overlay.js +49 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-pagination/scb-pagination.js +312 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-progress-indicator/scb-progress-indicator.js +87 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-progress-stepper/scb-progress-step.js +147 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-progress-stepper/scb-progress-stepper.js +62 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-radio-button/scb-radio-button.js +132 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-radio-button/scb-radio-group.js +43 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-scrollspy/scb-scrollspy.js +79 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-search/scb-search.js +292 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-segmented-button/scb-segmented-button.js +32 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-segmented-button/scb-segmented-item.js +74 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-select/scb-select-option.js +61 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-select/scb-select.js +284 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-skeleton/scb-skeleton.js +38 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-slider/scb-slider.js +27 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-snackbar/scb-snackbar.js +128 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-status-pill/scb-status-pill.js +45 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-stepper/scb-step.js +239 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-stepper/scb-stepper.js +139 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-switch/scb-switch.js +59 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-table/scb-table.js +51 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-table-advanced/scb-table-advanced.js +76 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-tabs/scb-primary-tab.js +6 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-tabs/scb-secondary-tab.js +6 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-tabs/scb-tabs.js +28 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-textfield/scb-textfield.js +595 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-toc/scb-toc-item.js +303 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-toc/scb-toc.js +19 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-tooltip/scb-tooltip.js +196 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-vignette/scb-vignette.js +37 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-viz/scb-viz-actions-runtime.js +2 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-viz/scb-viz-print-runtime.js +98 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-viz/scb-viz-series-differentiation-registry.js +1 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-viz/scb-viz-series-differentiation-runtime.js +1 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-viz/scb-viz-table-runtime.js +1 -0
- package/mvc/components/Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-viz/scb-viz.js +1140 -0
- package/mvc/components/all.js +90 -3
- package/mvc/components/scb-accordion/scb-accordion-item.js +1 -211
- package/mvc/components/scb-accordion/scb-accordion.js +1 -44
- package/mvc/components/scb-app-bar/scb-app-bar.js +1 -166
- package/mvc/components/scb-avatar/scb-avatar.js +1 -111
- package/mvc/components/scb-badge/scb-badge.js +1 -80
- package/mvc/components/scb-breadcrumb/scb-breadcrumb-item.js +1 -14
- package/mvc/components/scb-breadcrumb/scb-breadcrumb.js +1 -96
- package/mvc/components/scb-button/scb-button.js +1 -268
- package/mvc/components/scb-calendar/scb-calendar-event.js +1 -6
- package/mvc/components/scb-calendar/scb-calendar.js +1 -168
- package/mvc/components/scb-calendar-card/scb-calendar-card.js +1 -346
- package/mvc/components/scb-card/scb-card.js +1 -761
- package/mvc/components/scb-checkbox/scb-checkbox-group.js +1 -33
- package/mvc/components/scb-checkbox/scb-checkbox.js +1 -140
- package/mvc/components/scb-chip/scb-chip.js +1 -66
- package/mvc/components/scb-collapse/scb-collapse.js +1 -89
- package/mvc/components/scb-cookies-consent/scb-cookies-consent.js +1 -78
- package/mvc/components/scb-dialog/scb-dialog.js +1 -265
- package/mvc/components/scb-divider/scb-divider.js +1 -69
- package/mvc/components/scb-drawer/scb-drawer.js +1 -128
- package/mvc/components/scb-drop-zone/scb-drop-zone.js +1 -555
- package/mvc/components/scb-dropdown/scb-dropdown.js +1 -306
- package/mvc/components/scb-fab/scb-fab.js +1 -108
- package/mvc/components/scb-fact-card/scb-fact-card-content.js +1 -46
- package/mvc/components/scb-fact-card/scb-fact-card.js +1 -226
- package/mvc/components/scb-footer/scb-footer-section.js +1 -3
- package/mvc/components/scb-footer/scb-footer.js +1 -210
- package/mvc/components/scb-gallery-grid/scb-gallery-grid.js +1 -131
- package/mvc/components/scb-grid/scb-grid-item.js +1 -11
- package/mvc/components/scb-grid/scb-grid.js +1 -98
- package/mvc/components/scb-grid/scb-stack.js +1 -33
- package/mvc/components/scb-header/scb-header-menu-group.js +1 -1
- package/mvc/components/scb-header/scb-header-menu-item.js +1 -5
- package/mvc/components/scb-header/scb-header-tab.js +1 -5
- package/mvc/components/scb-header/scb-header-utility.js +1 -1
- package/mvc/components/scb-header/scb-header.js +1 -681
- package/mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js +1 -196
- package/mvc/components/scb-icon-button/scb-icon-button.js +1 -171
- package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js +1 -212
- package/mvc/components/scb-link/scb-link.js +1 -61
- package/mvc/components/scb-list/scb-list-item.js +1 -153
- package/mvc/components/scb-list/scb-list.js +1 -26
- package/mvc/components/scb-menu/scb-menu-item.js +1 -205
- package/mvc/components/scb-menu/scb-menu-section.js +1 -42
- package/mvc/components/scb-menu/scb-menu.js +1 -81
- package/mvc/components/scb-menu/scb-sub-menu.js +1 -10
- package/mvc/components/scb-nav/scb-nav-item.js +1 -28
- package/mvc/components/scb-nav/scb-nav.js +1 -104
- package/mvc/components/scb-notification-card/scb-notification-card.js +1 -358
- package/mvc/components/scb-options-menu/scb-options-menu-item.js +1 -66
- package/mvc/components/scb-options-menu/scb-options-menu.js +1 -88
- package/mvc/components/scb-options-menu/scb-options-sub-menu.js +1 -34
- package/mvc/components/scb-overlay/scb-overlay.js +1 -49
- package/mvc/components/scb-pagination/scb-pagination.js +1 -312
- package/mvc/components/scb-progress-indicator/scb-progress-indicator.js +1 -87
- package/mvc/components/scb-progress-stepper/scb-progress-step.js +1 -147
- package/mvc/components/scb-progress-stepper/scb-progress-stepper.js +1 -62
- package/mvc/components/scb-radio-button/scb-radio-button.js +1 -132
- package/mvc/components/scb-radio-button/scb-radio-group.js +1 -43
- package/mvc/components/scb-scrollspy/scb-scrollspy.js +1 -79
- package/mvc/components/scb-search/scb-search.js +1 -292
- package/mvc/components/scb-segmented-button/scb-segmented-button.js +1 -32
- package/mvc/components/scb-segmented-button/scb-segmented-item.js +1 -74
- package/mvc/components/scb-select/scb-select-option.js +1 -61
- package/mvc/components/scb-select/scb-select.js +1 -284
- package/mvc/components/scb-skeleton/scb-skeleton.js +1 -38
- package/mvc/components/scb-slider/scb-slider.js +1 -27
- package/mvc/components/scb-snackbar/scb-snackbar.js +1 -128
- package/mvc/components/scb-status-pill/scb-status-pill.js +1 -45
- package/mvc/components/scb-stepper/scb-step.js +1 -239
- package/mvc/components/scb-stepper/scb-stepper.js +1 -139
- package/mvc/components/scb-switch/scb-switch.js +1 -59
- package/mvc/components/scb-table/scb-table.js +1 -51
- package/mvc/components/scb-table-advanced/scb-table-advanced.js +1 -76
- package/mvc/components/scb-tabs/scb-primary-tab.js +1 -6
- package/mvc/components/scb-tabs/scb-secondary-tab.js +1 -6
- package/mvc/components/scb-tabs/scb-tabs.js +1 -28
- package/mvc/components/scb-textfield/scb-textfield.js +1 -595
- package/mvc/components/scb-toc/scb-toc-item.js +1 -303
- package/mvc/components/scb-toc/scb-toc.js +1 -19
- package/mvc/components/scb-tooltip/scb-tooltip.js +1 -196
- package/mvc/components/scb-viz/scb-viz-actions-runtime.js +1 -2
- package/mvc/components/scb-viz/scb-viz-print-runtime.js +1 -98
- package/mvc/components/scb-viz/scb-viz-series-differentiation-registry.js +1 -1
- package/mvc/components/scb-viz/scb-viz-series-differentiation-runtime.js +1 -1
- package/mvc/components/scb-viz/scb-viz-table-runtime.js +1 -1
- package/mvc/components/scb-viz/scb-viz.js +1 -1140
- package/package.json +13 -4
- package/scb-chevron/scb-chevron.js +0 -1
- package/scb-datepicker/scb-datepicker.js +0 -1
- package/scb-vignette/scb-vignette.js +0 -1
- package/scb-wc-public-entry/index.d.ts +87 -0
- package/scb-wc.bundle.js +5595 -5595
- package/scb-wc.d.ts +174 -180
- package/starters/blazor/Components/App.razor +34 -0
- package/starters/blazor/Components/Layout/MainLayout.razor +39 -0
- package/starters/blazor/Components/Pages/Home.razor +80 -0
- package/starters/blazor/Components/Routes.razor +14 -0
- package/starters/blazor/Components/_Imports.razor +10 -0
- package/starters/blazor/Program.cs +23 -0
- package/starters/blazor/README.md +28 -0
- package/starters/blazor/ScbStarterApp.csproj +7 -0
- package/starters/blazor/dot-gitignore +3 -0
- package/starters/blazor/package.json +14 -0
- package/starters/blazor/wwwroot/app.css +54 -0
- package/starters/html/README.md +23 -0
- package/starters/html/dot-gitignore +2 -0
- package/starters/html/index.html +12 -0
- package/starters/html/main.js +135 -0
- package/starters/html/package.json +16 -0
- package/starters/react/README.md +24 -0
- package/starters/react/dot-gitignore +2 -0
- package/starters/react/index.html +12 -0
- package/starters/react/package.json +19 -0
- package/starters/react/src/App.jsx +118 -0
- package/starters/react/src/main.jsx +29 -0
- package/starters/react/vite.config.js +6 -0
- package/mvc/components/scb-vignette/scb-vignette.js +0 -37
|
@@ -1,88 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
<div
|
|
3
|
-
role="menu"
|
|
4
|
-
class="scb-options-menu-panel${this.open?" open":""}"
|
|
5
|
-
>
|
|
6
|
-
<slot></slot>
|
|
7
|
-
</div>
|
|
8
|
-
`}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0),window.addEventListener("resize",this.__onViewportChange,{passive:!0}),window.addEventListener("scroll",this.__onViewportChange,{passive:!0,capture:!0})}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),window.removeEventListener("resize",this.__onViewportChange),window.removeEventListener("scroll",this.__onViewportChange,!0),super.disconnectedCallback()}__setOpen(e){this.open=e}__getActionFromEvent(e){if(!this.id)return null;const t=e.composedPath();for(const i of t)if(i instanceof Element){if(i.getAttribute("data-menu-open")===this.id)return this.__lastTriggerEl=i,"open";if(i.getAttribute("data-menu-close")===this.id)return this.__lastTriggerEl=i,"close";if(i.getAttribute("data-menu-toggle")===this.id)return this.__lastTriggerEl=i,"toggle";if(i.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=i,"toggle"}return null}isClickInScbMenu(e){return e.composedPath().some(t=>t instanceof Element&&(t.tagName==="SCB-OPTIONS-MENU"||t.tagName==="SCB-OPTIONS-SUB-MENU"))}updated(e){e.has("open")&&(this.__applyOpenSideEffects(),this.open?this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&this.__applySpacing()}__applyOpenSideEffects(){this.__updateTriggersExpanded(),this.open?this.__positionToTrigger():this.__restoreFocusToTrigger()}__positionToTrigger(){if(!this.open||!this.__lastTriggerEl)return;const e=this.__lastTriggerEl,t=this.shadowRoot?.querySelector(".scb-options-menu-panel");t&&requestAnimationFrame(()=>{if(!this.open)return;const i=e.getBoundingClientRect(),a=t.getBoundingClientRect(),o=window.innerWidth,l=window.innerHeight,p=8,d=4;let c=i.left,u=i.bottom+d;const h=a.width,b=a.height;c+h>o-p&&(c=Math.max(p,o-p-h)),c<p&&(c=p);let _="top";if(u+b>l-p){const f=i.top-d-b;f>=p&&(u=f,_="bottom")}this.style.position="fixed",this.style.left=`${Math.round(c)}px`,this.style.top=`${Math.round(u)}px`,this.style.setProperty("--scb-options-menu-transform-origin",_)})}__restoreFocusToTrigger(){this.__lastTriggerEl&&requestAnimationFrame(()=>{this.__lastTriggerEl?.focus?.()})}__updateTriggersExpanded(){if(!this.id)return;const e=String(this.open),t=i=>{i.getAttribute("aria-controls")===this.id&&i.setAttribute("aria-expanded",e)};this.__lastTriggerEl&&t(this.__lastTriggerEl),document.querySelectorAll(`[aria-controls="${this.id}"], [data-menu-open="${this.id}"], [data-menu-close="${this.id}"], [data-menu-toggle="${this.id}"]`).forEach(t)}__applySpacing(){const e=this.__mapSpacingToken(this.spacing),t=this.__mapSpacingToken(this.spacingTop)??e,i=this.__mapSpacingToken(this.spacingBottom)??e,a=this.__mapSpacingToken(this.spacingLeft),o=this.__mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-options-menu-spacing-block-start",t):this.style.removeProperty("--scb-options-menu-spacing-block-start"),i?this.style.setProperty("--scb-options-menu-spacing-block-end",i):this.style.removeProperty("--scb-options-menu-spacing-block-end"),a?this.style.setProperty("--scb-options-menu-spacing-inline-start",a):this.style.removeProperty("--scb-options-menu-spacing-inline-start"),o?this.style.setProperty("--scb-options-menu-spacing-inline-end",o):this.style.removeProperty("--scb-options-menu-spacing-inline-end")}__mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}},m.styles=v`
|
|
9
|
-
:host {
|
|
10
|
-
position: absolute;
|
|
11
|
-
display: block;
|
|
12
|
-
width: fit-content;
|
|
13
|
-
font-family: var(--brand-font);
|
|
14
|
-
--scb-options-menu-max-width: 300px;
|
|
15
|
-
--scb-options-menu-max-height: 600px;
|
|
16
|
-
--scb-options-menu-panel-padding-block: var(--spacing-3, 8px);
|
|
17
|
-
--scb-options-menu-item-padding-inline: var(--spacing-5, 16px);
|
|
18
|
-
--scb-options-menu-item-padding-block: var(--spacing-3, 8px);
|
|
19
|
-
--scb-options-menu-item-gap: var(--spacing-4, 12px);
|
|
20
|
-
--scb-options-menu-item-min-height: 56px;
|
|
21
|
-
--scb-options-menu-label-font-size: var(--md-sys-typescale-body-large-size);
|
|
22
|
-
--scb-options-menu-label-line-height: var(--md-sys-typescale-body-large-line-height);
|
|
23
|
-
--scb-options-menu-label-letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
24
|
-
--scb-options-menu-icon-size: 24px;
|
|
25
|
-
--scb-options-sub-menu-offset-top: -44px;
|
|
26
|
-
z-index: 1000;
|
|
27
|
-
|
|
28
|
-
margin-block-start: var(--scb-options-menu-spacing-block-start, 0);
|
|
29
|
-
margin-block-end: var(--scb-options-menu-spacing-block-end, 0);
|
|
30
|
-
margin-inline-start: var(--scb-options-menu-spacing-inline-start, 0);
|
|
31
|
-
margin-inline-end: var(--scb-options-menu-spacing-inline-end, 0);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
:host([size='medium']) {
|
|
35
|
-
--scb-options-menu-panel-padding-block: var(--spacing-2, 4px);
|
|
36
|
-
--scb-options-menu-item-padding-inline: var(--spacing-5, 16px);
|
|
37
|
-
--scb-options-menu-item-padding-block: var(--spacing-2, 4px);
|
|
38
|
-
--scb-options-menu-item-gap: var(--spacing-3, 8px);
|
|
39
|
-
--scb-options-menu-item-min-height: 48px;
|
|
40
|
-
--scb-options-menu-label-font-size: var(--md-sys-typescale-body-medium-size);
|
|
41
|
-
--scb-options-menu-label-line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
42
|
-
--scb-options-menu-label-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
43
|
-
--scb-options-menu-icon-size: 20px;
|
|
44
|
-
--scb-options-sub-menu-offset-top: -40px;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
:host([size='small']) {
|
|
48
|
-
--scb-options-menu-panel-padding-block: var(--spacing-1, 2px);
|
|
49
|
-
--scb-options-menu-item-padding-inline: var(--spacing-4, 12px);
|
|
50
|
-
--scb-options-menu-item-padding-block: var(--spacing-2, 4px);
|
|
51
|
-
--scb-options-menu-item-gap: var(--spacing-3, 8px);
|
|
52
|
-
--scb-options-menu-item-min-height: 40px;
|
|
53
|
-
--scb-options-menu-label-font-size: var(--md-sys-typescale-body-small-size);
|
|
54
|
-
--scb-options-menu-label-line-height: var(--md-sys-typescale-body-small-line-height);
|
|
55
|
-
--scb-options-menu-label-letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
56
|
-
--scb-options-menu-icon-size: 18px;
|
|
57
|
-
--scb-options-sub-menu-offset-top: -32px;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
:host > .scb-options-menu-panel {
|
|
61
|
-
padding: var(--scb-options-menu-panel-padding-block) 0;
|
|
62
|
-
color: var(--md-sys-color-on-surface);
|
|
63
|
-
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
64
|
-
background: var(--md-sys-color-surface, #FFF);
|
|
65
|
-
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
|
66
|
-
background: var(--md-sys-color-surface, #FFF);
|
|
67
|
-
opacity: 0;
|
|
68
|
-
max-height: 0;
|
|
69
|
-
transform: scaleY(0.8);
|
|
70
|
-
transform-origin: var(--scb-options-menu-transform-origin, top);
|
|
71
|
-
transition:
|
|
72
|
-
opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1),
|
|
73
|
-
transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
|
|
74
|
-
will-change: opacity, transform;
|
|
75
|
-
|
|
76
|
-
}
|
|
77
|
-
:host > .scb-options-menu-panel.open {
|
|
78
|
-
opacity: 1;
|
|
79
|
-
transform: scaleY(1);
|
|
80
|
-
max-width: var(--scb-options-menu-max-width);
|
|
81
|
-
max-height: var(--scb-options-menu-max-height);
|
|
82
|
-
min-width: 112px;
|
|
83
|
-
overflow: visible;
|
|
84
|
-
transition:
|
|
85
|
-
opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1),
|
|
86
|
-
transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
|
|
87
|
-
}
|
|
88
|
-
`,m);n([r({type:Boolean,reflect:!0})],s.prototype,"open",void 0);n([r({type:String,reflect:!0})],s.prototype,"size",void 0);n([r({type:Boolean,attribute:!1})],s.prototype,"inSb",void 0);n([r({type:String,reflect:!0})],s.prototype,"spacing",void 0);n([r({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",void 0);n([r({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",void 0);n([r({type:String,attribute:"spacing-left",reflect:!0})],s.prototype,"spacingLeft",void 0);n([r({type:String,attribute:"spacing-right",reflect:!0})],s.prototype,"spacingRight",void 0);s=n([x("scb-options-menu")],s);
|
|
1
|
+
import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-options-menu/scb-options-menu.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
|
|
@@ -1,34 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
<div role="menu" class="submenu${this.open?" open":""}">
|
|
3
|
-
<slot></slot>
|
|
4
|
-
</div>
|
|
5
|
-
`}},i.styles=p`
|
|
6
|
-
:host {
|
|
7
|
-
display: block;
|
|
8
|
-
position: relative;
|
|
9
|
-
--scb-options-sub-menu-max-width: 300px;
|
|
10
|
-
--scb-options-sub-menu-max-height: 600px;
|
|
11
|
-
}
|
|
12
|
-
.submenu {
|
|
13
|
-
max-width: var(--scb-options-sub-menu-max-width);
|
|
14
|
-
max-height: var(--scb-options-sub-menu-max-height);
|
|
15
|
-
min-width: 112px;
|
|
16
|
-
display: none;
|
|
17
|
-
position: absolute;
|
|
18
|
-
left: 100%;
|
|
19
|
-
top: var(--scb-options-sub-menu-offset-top, -44px);
|
|
20
|
-
z-index: 100;
|
|
21
|
-
padding: var(--scb-options-menu-panel-padding-block, var(--spacing-3, 8px)) 0;
|
|
22
|
-
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
23
|
-
background: var(--md-sys-color-surface, #FFF);
|
|
24
|
-
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
|
|
25
|
-
}
|
|
26
|
-
:host([open-left]) .submenu {
|
|
27
|
-
left: auto;
|
|
28
|
-
right: 100%;
|
|
29
|
-
}
|
|
30
|
-
:host([open]) .submenu,
|
|
31
|
-
.submenu.open {
|
|
32
|
-
display: block;
|
|
33
|
-
}
|
|
34
|
-
`,i);a([l({type:Boolean,reflect:!0})],n.prototype,"open",void 0);n=a([b("scb-options-sub-menu")],n);
|
|
1
|
+
import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-options-menu/scb-options-sub-menu.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
|
|
@@ -1,49 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
<div class="scrim" @click=${y(v,this)}>
|
|
3
|
-
<div class="content" role="dialog" aria-modal="true" aria-label="${this.ariaLabel||g}">
|
|
4
|
-
<slot></slot>
|
|
5
|
-
</div>
|
|
6
|
-
</div>
|
|
7
|
-
`:g}connectedCallback(){super.connectedCallback(),this.id&&e.__instances.set(this.id,this),e.__ensureDocListener(),window.addEventListener("keydown",y(_,this))}updated(s){s.has("open")&&r(n,this,D).call(this)}disconnectedCallback(){this.id&&e.__instances.delete(this.id),e.__maybeRemoveDocListener(),window.removeEventListener("keydown",y(_,this)),super.disconnectedCallback()}},e=c,c.__instances=new Map,c.__docListenerAttached=!1,c.styles=w`
|
|
8
|
-
:host {
|
|
9
|
-
position: fixed;
|
|
10
|
-
inset: 0;
|
|
11
|
-
z-index: var(--scb-overlay-z-index, 1000);
|
|
12
|
-
display: none;
|
|
13
|
-
box-sizing: border-box;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
:host([open]) {
|
|
17
|
-
display: block;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.scrim {
|
|
21
|
-
display: grid;
|
|
22
|
-
place-items: center;
|
|
23
|
-
inline-size: 100%;
|
|
24
|
-
block-size: 100%;
|
|
25
|
-
padding: var(--scb-overlay-padding, var(--spacing-6, 24px));
|
|
26
|
-
background: var(
|
|
27
|
-
--scb-overlay-backdrop,
|
|
28
|
-
color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent)
|
|
29
|
-
);
|
|
30
|
-
box-sizing: border-box;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
:host([variant='solid']) .scrim {
|
|
34
|
-
background: var(--md-sys-color-surface);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.content {
|
|
38
|
-
position: relative;
|
|
39
|
-
max-inline-size: 100%;
|
|
40
|
-
max-block-size: 100%;
|
|
41
|
-
box-sizing: border-box;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.content ::slotted(*) {
|
|
45
|
-
margin: auto;
|
|
46
|
-
max-inline-size: 100%;
|
|
47
|
-
max-block-size: 100%;
|
|
48
|
-
}
|
|
49
|
-
`,c);function b(i){this.open=i}function x(){this.open&&(this.isStatic||(r(n,this,b).call(this,!1),this.dispatchEvent(new CustomEvent("scb-overlay-dismiss",{bubbles:!0,composed:!0}))))}function O(i){const s=this.renderRoot.querySelector("slot");if(!(s instanceof HTMLSlotElement))return!1;const t=i.composedPath();return s.assignedNodes({flatten:!0}).some(a=>t.includes(a))}function D(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-overlay-toggle="${this.id}"], [data-overlay-open="${this.id}"], [data-overlay-close="${this.id}"]`).forEach(i=>{i.hasAttribute("aria-controls")&&i.setAttribute("aria-expanded",String(this.open))})}u([f({type:Boolean,reflect:!0})],l.prototype,"open",void 0);u([f({type:String,reflect:!0})],l.prototype,"variant",void 0);u([f({type:Boolean,reflect:!0,attribute:"static"})],l.prototype,"isStatic",void 0);u([f({type:String,attribute:"aria-label"})],l.prototype,"ariaLabel",void 0);l=e=u([z("scb-overlay")],l);
|
|
1
|
+
import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-overlay/scb-overlay.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,o,c){try{customElements.get(e)||r(e,o,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
|
|
@@ -1,312 +1 @@
|
|
|
1
|
-
import"
|
|
2
|
-
class="paging-action-link"
|
|
3
|
-
href=${b}
|
|
4
|
-
@click=${this._prevPage}
|
|
5
|
-
aria-label="Föregående sida"
|
|
6
|
-
aria-disabled=${this.page===1?"true":"false"}
|
|
7
|
-
>
|
|
8
|
-
<scb-icon-button
|
|
9
|
-
icon="chevron_left"
|
|
10
|
-
?disabled=${this.page===1}
|
|
11
|
-
aria-label="Föregående sida"
|
|
12
|
-
></scb-icon-button>
|
|
13
|
-
</a>`:n`<a
|
|
14
|
-
class="paging-action-link"
|
|
15
|
-
href=${b}
|
|
16
|
-
@click=${this._prevPage}
|
|
17
|
-
aria-label="Föregående sida"
|
|
18
|
-
aria-disabled=${this.page===1?"true":"false"}
|
|
19
|
-
>
|
|
20
|
-
<scb-button
|
|
21
|
-
variant="text"
|
|
22
|
-
label="Föregående"
|
|
23
|
-
icon="chevron_left"
|
|
24
|
-
?disabled=${this.page===1}
|
|
25
|
-
aria-label="Föregående sida"
|
|
26
|
-
></scb-button>
|
|
27
|
-
</a>`:this.variant==="icon"?n`<scb-icon-button
|
|
28
|
-
icon="chevron_left"
|
|
29
|
-
@click=${this._prevPage}
|
|
30
|
-
?disabled=${this.page===1}
|
|
31
|
-
aria-label="Föregående sida"
|
|
32
|
-
></scb-icon-button>`:n`<scb-button
|
|
33
|
-
variant="text"
|
|
34
|
-
label="Föregående"
|
|
35
|
-
icon="chevron_left"
|
|
36
|
-
@click=${this._prevPage}
|
|
37
|
-
?disabled=${this.page===1}
|
|
38
|
-
aria-label="Föregående sida"
|
|
39
|
-
></scb-button>`,m=this.pagingHref?this.variant==="icon"?n`<a
|
|
40
|
-
class="paging-action-link"
|
|
41
|
-
href=${u}
|
|
42
|
-
@click=${this._nextPage}
|
|
43
|
-
aria-label="Nästa sida"
|
|
44
|
-
aria-disabled=${this.page===this.totalPages?"true":"false"}
|
|
45
|
-
>
|
|
46
|
-
<scb-icon-button
|
|
47
|
-
icon="chevron_right"
|
|
48
|
-
?disabled=${this.page===this.totalPages}
|
|
49
|
-
aria-label="Nästa sida"
|
|
50
|
-
></scb-icon-button>
|
|
51
|
-
</a>`:n`<a
|
|
52
|
-
class="paging-action-link"
|
|
53
|
-
href=${u}
|
|
54
|
-
@click=${this._nextPage}
|
|
55
|
-
aria-label="Nästa sida"
|
|
56
|
-
aria-disabled=${this.page===this.totalPages?"true":"false"}
|
|
57
|
-
>
|
|
58
|
-
<scb-button
|
|
59
|
-
variant="text"
|
|
60
|
-
label="Nästa"
|
|
61
|
-
icon="chevron_right"
|
|
62
|
-
iconPosition="right"
|
|
63
|
-
?disabled=${this.page===this.totalPages}
|
|
64
|
-
aria-label="Nästa sida"
|
|
65
|
-
trailing-icon
|
|
66
|
-
></scb-button>
|
|
67
|
-
</a>`:this.variant==="icon"?n`<scb-icon-button
|
|
68
|
-
icon="chevron_right"
|
|
69
|
-
@click=${this._nextPage}
|
|
70
|
-
?disabled=${this.page===this.totalPages}
|
|
71
|
-
aria-label="Nästa sida"
|
|
72
|
-
></scb-icon-button>`:n`<scb-button
|
|
73
|
-
variant="text"
|
|
74
|
-
label="Nästa"
|
|
75
|
-
icon="chevron_right"
|
|
76
|
-
iconPosition="right"
|
|
77
|
-
@click=${this._nextPage}
|
|
78
|
-
?disabled=${this.page===this.totalPages}
|
|
79
|
-
aria-label="Nästa sida"
|
|
80
|
-
trailing-icon
|
|
81
|
-
></scb-button>`,p=e=>e===s?n`
|
|
82
|
-
<li>
|
|
83
|
-
<span
|
|
84
|
-
class="page-number active"
|
|
85
|
-
aria-current="page"
|
|
86
|
-
aria-label="${this.currentAriaLabel} ${e}"
|
|
87
|
-
>${e}</span
|
|
88
|
-
>
|
|
89
|
-
</li>
|
|
90
|
-
`:n`
|
|
91
|
-
<li>
|
|
92
|
-
<scb-link
|
|
93
|
-
class="page-number${e===s?" active":""}"
|
|
94
|
-
@click=${v=>this._handlePageSelection(e,v)}
|
|
95
|
-
aria-current=${e===s?"page":void 0}
|
|
96
|
-
aria-label="${this.pagingNumberAriaLabel} ${e}"
|
|
97
|
-
href=${this._getPagingHref(e)}
|
|
98
|
-
?disabled=${e===s}
|
|
99
|
-
>${e}</scb-link
|
|
100
|
-
>
|
|
101
|
-
</li>
|
|
102
|
-
`;if(a<=8)for(let e=1;e<=a;e++)t.push(p(e));else if(t.push(p(1)),s<=4&&!l){for(let e=2;e<=5;e++)t.push(p(e));a>6?(t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),t.push(p(a))):a===6&&t.push(p(a))}else if(s<=3&&l){for(let e=2;e<=3;e++)t.push(p(e));a>4?(t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),t.push(p(a))):a===4&&t.push(p(a))}else if(s>=a-(g+1)){t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let e=a-g*2;e<=a;e++)e>1&&t.push(p(e))}else{t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let e=s-g;e<=s+g;e++)e>1&&e<a&&t.push(p(e));t.push(n`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),t.push(p(a))}return l?n`
|
|
103
|
-
<nav aria-label="${this.paginationAriaLabel}" class="pagination ${i}">
|
|
104
|
-
<div class="pagination-row">
|
|
105
|
-
<div class="prev">
|
|
106
|
-
${f}
|
|
107
|
-
</div>
|
|
108
|
-
<ol>
|
|
109
|
-
${t}
|
|
110
|
-
</ol>
|
|
111
|
-
</div>
|
|
112
|
-
<div class="next">
|
|
113
|
-
${m}
|
|
114
|
-
</div>
|
|
115
|
-
</nav>
|
|
116
|
-
`:n`
|
|
117
|
-
<nav aria-label="${this.paginationAriaLabel}" class="pagination ${i}">
|
|
118
|
-
<div class="pagination-row">
|
|
119
|
-
<div class="prev">
|
|
120
|
-
${f}
|
|
121
|
-
</div>
|
|
122
|
-
<ol>
|
|
123
|
-
${t}
|
|
124
|
-
</ol>
|
|
125
|
-
<div class="next">
|
|
126
|
-
${m}
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
</nav>
|
|
130
|
-
`}},h.styles=[x`
|
|
131
|
-
:host {
|
|
132
|
-
display: block;
|
|
133
|
-
width: 100%;
|
|
134
|
-
|
|
135
|
-
margin-block-start: var(--scb-pagination-spacing-block-start, 0);
|
|
136
|
-
margin-block-end: var(--scb-pagination-spacing-block-end, 0);
|
|
137
|
-
margin-inline-start: var(--scb-pagination-spacing-inline-start, 0);
|
|
138
|
-
margin-inline-end: var(--scb-pagination-spacing-inline-end, 0);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
:host .pagination {
|
|
142
|
-
--md-text-button-label-text-color: var(--md-sys-color-on-surface, #0F0865);
|
|
143
|
-
--md-text-button-pressed-state-layer-color: var(--md-sys-color-on-surface, #0F0865);
|
|
144
|
-
--md-text-button-focus-label-text-color: var(--md-sys-color-on-surface, #0F0865);
|
|
145
|
-
--md-text-button-hover-label-text-color: var(--md-sys-color-on-surface, #0F0865);
|
|
146
|
-
--md-text-button-pressed-label-text-color: var(--md-sys-color-on-surface, #0F0865);
|
|
147
|
-
--md-text-button-hover-state-layer-color: var(--md-sys-color-on-surface, #0F0865);
|
|
148
|
-
--md-text-button-label-text-weight: var(--weight-regular, 400);
|
|
149
|
-
--md-text-button-label-text-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
|
|
150
|
-
--md-text-button-label-text-size: var(--md-sys-typescale-body-medium-size, 16px);
|
|
151
|
-
--md-text-button-icon-color: var(--md-sys-color-on-surface, #0F0865);
|
|
152
|
-
--md-text-button-focus-icon-color: var(--md-sys-color-on-surface, #0F0865);
|
|
153
|
-
--md-text-button-hover-icon-color: var(--md-sys-color-on-surface, #0F0865);
|
|
154
|
-
--md-text-button-pressed-icon-color: var(--md-sys-color-on-surface, #0F0865);
|
|
155
|
-
--scb-link-decoration: none;
|
|
156
|
-
--scb-link-color: var(--md-sys-color-on-surface, #0F0865);
|
|
157
|
-
|
|
158
|
-
scb-link.page-number a {
|
|
159
|
-
cursor: pointer;
|
|
160
|
-
text-decoration: none;
|
|
161
|
-
display: inline-flex;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.pagination {
|
|
166
|
-
width: 100%;
|
|
167
|
-
display: flex;
|
|
168
|
-
flex-direction: column;
|
|
169
|
-
gap: 0;
|
|
170
|
-
}
|
|
171
|
-
.pagination-row {
|
|
172
|
-
width: 100%;
|
|
173
|
-
display: flex;
|
|
174
|
-
flex-direction: row;
|
|
175
|
-
align-items: center;
|
|
176
|
-
gap: 4px;
|
|
177
|
-
}
|
|
178
|
-
.pagination-row .prev {
|
|
179
|
-
display: flex;
|
|
180
|
-
justify-content: flex-start;
|
|
181
|
-
width: auto;
|
|
182
|
-
}
|
|
183
|
-
.pagination-row ol {
|
|
184
|
-
width: auto;
|
|
185
|
-
display: flex;
|
|
186
|
-
flex-direction: row;
|
|
187
|
-
justify-content: flex-start;
|
|
188
|
-
gap: 4px;
|
|
189
|
-
margin: 0;
|
|
190
|
-
padding: 0;
|
|
191
|
-
list-style: none;
|
|
192
|
-
}
|
|
193
|
-
.pagination-row ol li {
|
|
194
|
-
min-width: 40px;
|
|
195
|
-
min-height: 40px;
|
|
196
|
-
display: flex;
|
|
197
|
-
align-items: center;
|
|
198
|
-
justify-content: center;
|
|
199
|
-
}
|
|
200
|
-
.pagination-row .next {
|
|
201
|
-
display: flex;
|
|
202
|
-
justify-content: flex-start;
|
|
203
|
-
align-items: center;
|
|
204
|
-
width: auto;
|
|
205
|
-
margin-top: 0;
|
|
206
|
-
}
|
|
207
|
-
scb-link.page-number a {
|
|
208
|
-
cursor: pointer;
|
|
209
|
-
text-decoration: none;
|
|
210
|
-
display: inline-flex;
|
|
211
|
-
}
|
|
212
|
-
.pagination-row ol li scb-link.page-number {
|
|
213
|
-
--scb-link-focus-ring-gap: 0;
|
|
214
|
-
--scb-link-decoration: none;
|
|
215
|
-
--scb-link-hover-thickness: 1px;
|
|
216
|
-
display: inline-flex;
|
|
217
|
-
align-items: center;
|
|
218
|
-
justify-content: center;
|
|
219
|
-
width: 40px;
|
|
220
|
-
height: 40px;
|
|
221
|
-
border-radius: 999px;
|
|
222
|
-
}
|
|
223
|
-
.pagination-row ol li scb-link.page-number::part(anchor) {
|
|
224
|
-
display: inline-flex;
|
|
225
|
-
align-items: center;
|
|
226
|
-
justify-content: center;
|
|
227
|
-
width: 40px;
|
|
228
|
-
height: 40px;
|
|
229
|
-
border-radius: 999px;
|
|
230
|
-
color: var(--md-sys-color-on-surface, #0F0865);
|
|
231
|
-
cursor: pointer;
|
|
232
|
-
text-decoration: none;
|
|
233
|
-
transition: background-color 120ms linear;
|
|
234
|
-
}
|
|
235
|
-
.pagination-row ol li scb-link.page-number::part(anchor):hover {
|
|
236
|
-
background: color-mix(
|
|
237
|
-
in srgb,
|
|
238
|
-
var(--md-text-button-hover-state-layer-color, var(--md-sys-color-on-surface, #0F0865)) 8%,
|
|
239
|
-
transparent
|
|
240
|
-
);
|
|
241
|
-
}
|
|
242
|
-
.pagination-row ol li scb-link.page-number::part(anchor):focus-visible {
|
|
243
|
-
background: color-mix(
|
|
244
|
-
in srgb,
|
|
245
|
-
var(--md-sys-color-on-surface, #0F0865) 10%,
|
|
246
|
-
transparent
|
|
247
|
-
);
|
|
248
|
-
}
|
|
249
|
-
.page-number.active {
|
|
250
|
-
display: inline-flex;
|
|
251
|
-
align-items: center;
|
|
252
|
-
justify-content: center;
|
|
253
|
-
border-radius: 50%;
|
|
254
|
-
background: var(--md-sys-color-primary, #1F44FF);
|
|
255
|
-
color: var(--md-sys-color-on-primary, #FFF);
|
|
256
|
-
text-align: center;
|
|
257
|
-
width: 40px;
|
|
258
|
-
height: 40px;
|
|
259
|
-
}
|
|
260
|
-
.page-number.active {
|
|
261
|
-
font-family: var(--brand-font, 'Inter', sans-serif);
|
|
262
|
-
}
|
|
263
|
-
.ellipsis {
|
|
264
|
-
margin: 0 4px;
|
|
265
|
-
color: #888;
|
|
266
|
-
user-select: none;
|
|
267
|
-
pointer-events: none;
|
|
268
|
-
}
|
|
269
|
-
scb-button[disabled] {
|
|
270
|
-
opacity: 0.5;
|
|
271
|
-
pointer-events: none;
|
|
272
|
-
}
|
|
273
|
-
.paging-action-link {
|
|
274
|
-
display: inline-flex;
|
|
275
|
-
text-decoration: none;
|
|
276
|
-
}
|
|
277
|
-
.paging-action-link[aria-disabled='true'] {
|
|
278
|
-
opacity: 0.5;
|
|
279
|
-
pointer-events: none;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
@media (max-width: 768px) {
|
|
283
|
-
.pagination .prev {
|
|
284
|
-
display: flex;
|
|
285
|
-
justify-content: flex-start;
|
|
286
|
-
}
|
|
287
|
-
.pagination .next {
|
|
288
|
-
width: 100%;
|
|
289
|
-
margin-top: 8px;
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
@media (max-width: 390px) {
|
|
294
|
-
.pagination-row {
|
|
295
|
-
flex-direction: column;
|
|
296
|
-
gap: 0;
|
|
297
|
-
}
|
|
298
|
-
.pagination-row .prev {
|
|
299
|
-
width: 100%;
|
|
300
|
-
margin-bottom: 8px;
|
|
301
|
-
align-items: center;
|
|
302
|
-
}
|
|
303
|
-
.pagination-row ol {
|
|
304
|
-
width: 100%;
|
|
305
|
-
align-items: center;
|
|
306
|
-
}
|
|
307
|
-
.pagination-row .next {
|
|
308
|
-
width: 100%;
|
|
309
|
-
margin-top: 8px;
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
`],h);r([c({type:String})],o.prototype,"variant",void 0);r([c({type:Number})],o.prototype,"page",void 0);r([c({type:Number,attribute:"total-pages"})],o.prototype,"totalPages",void 0);r([c({type:String,attribute:"paging-href"})],o.prototype,"pagingHref",void 0);r([c({type:String,attribute:"base-uri"})],o.prototype,"baseUri",void 0);r([c({type:String,attribute:"pagination-aria-label"})],o.prototype,"paginationAriaLabel",void 0);r([c({type:String,attribute:"current-aria-label"})],o.prototype,"currentAriaLabel",void 0);r([c({type:String,attribute:"paging-number-aria-label"})],o.prototype,"pagingNumberAriaLabel",void 0);r([c({type:Boolean})],o.prototype,"isNarrow",void 0);r([c({type:String})],o.prototype,"spacing",void 0);r([c({type:String,attribute:"spacing-top"})],o.prototype,"spacingTop",void 0);r([c({type:String,attribute:"spacing-bottom"})],o.prototype,"spacingBottom",void 0);r([c({type:String,attribute:"spacing-left"})],o.prototype,"spacingLeft",void 0);r([c({type:String,attribute:"spacing-right"})],o.prototype,"spacingRight",void 0);o=r([w("scb-pagination")],o);
|
|
1
|
+
import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-pagination/scb-pagination.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
|
|
@@ -1,87 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
<div class="scb-progress-indicator">
|
|
3
|
-
${this.type==="circular"?o`
|
|
4
|
-
<div class="circular">
|
|
5
|
-
<svg class="circular-spin" viewBox="0 0 40 40" aria-hidden="true" focusable="false">
|
|
6
|
-
<circle class="circular-bg" cx="20" cy="20" r="16" fill="none" stroke-width="4" />
|
|
7
|
-
<circle
|
|
8
|
-
class="circular-fg"
|
|
9
|
-
cx="20" cy="20" r="16" fill="none" stroke-width="4"
|
|
10
|
-
stroke="var(--md-sys-color-primary)"
|
|
11
|
-
stroke-dasharray="${2*Math.PI*16}"
|
|
12
|
-
stroke-dashoffset="${(1-this.progress/100)*2*Math.PI*16}"
|
|
13
|
-
/>
|
|
14
|
-
</svg>
|
|
15
|
-
</div>
|
|
16
|
-
`:o`
|
|
17
|
-
<div class="linear" style="--progress-fill: var(--md-sys-color-primary);">
|
|
18
|
-
${this.isStatic?o`<div class="linear-static" style="width: ${this.progress}%;"></div>`:o`<div class="linear-loader"></div>`}
|
|
19
|
-
</div>
|
|
20
|
-
`}
|
|
21
|
-
</div>
|
|
22
|
-
`}},c.styles=[u`
|
|
23
|
-
|
|
24
|
-
.circular {
|
|
25
|
-
display: flex;
|
|
26
|
-
align-items: center;
|
|
27
|
-
justify-content: center;
|
|
28
|
-
width: 46px;
|
|
29
|
-
height: 46px;
|
|
30
|
-
position: relative;
|
|
31
|
-
}
|
|
32
|
-
.circular-spin {
|
|
33
|
-
animation: spin 1s linear infinite;
|
|
34
|
-
width: 46px;
|
|
35
|
-
height: 46px ;
|
|
36
|
-
position: relative;
|
|
37
|
-
z-index: 1;
|
|
38
|
-
}
|
|
39
|
-
@keyframes spin {
|
|
40
|
-
0% { transform: rotate(0deg); }
|
|
41
|
-
100% { transform: rotate(360deg); }
|
|
42
|
-
}
|
|
43
|
-
.circular-bg {
|
|
44
|
-
stroke: var(--md-sys-color-secondary-container);
|
|
45
|
-
}
|
|
46
|
-
.circular-fg {
|
|
47
|
-
transition: stroke-dashoffset 0.3s ease;
|
|
48
|
-
}
|
|
49
|
-
.linear {
|
|
50
|
-
width: 100%;
|
|
51
|
-
height: 6px;
|
|
52
|
-
background: var(--md-sys-color-secondary-container);
|
|
53
|
-
border-radius: 3px;
|
|
54
|
-
overflow: hidden;
|
|
55
|
-
position: relative;
|
|
56
|
-
}
|
|
57
|
-
:host {
|
|
58
|
-
display: inline-block;
|
|
59
|
-
margin-block-start: var(--scb-progress-indicator-spacing-block-start, 0);
|
|
60
|
-
margin-block-end: var(--scb-progress-indicator-spacing-block-end, 0);
|
|
61
|
-
margin-inline-start: var(--scb-progress-indicator-spacing-inline-start, 0);
|
|
62
|
-
margin-inline-end: var(--scb-progress-indicator-spacing-inline-end, 0);
|
|
63
|
-
--progress-fill: var(--md-sys-color-primary);
|
|
64
|
-
}
|
|
65
|
-
:host([type='linear']) {
|
|
66
|
-
display: block;
|
|
67
|
-
width: 100%;
|
|
68
|
-
}
|
|
69
|
-
.linear-loader {
|
|
70
|
-
height: 100%;
|
|
71
|
-
width: 40%;
|
|
72
|
-
background: var(--progress-fill);
|
|
73
|
-
border-radius: 3px;
|
|
74
|
-
animation: linear-progress 1.2s cubic-bezier(.4,0,.2,1) infinite;
|
|
75
|
-
}
|
|
76
|
-
.linear-static {
|
|
77
|
-
height: 100%;
|
|
78
|
-
border-radius: 3px;
|
|
79
|
-
transition: width 0.3s ease;
|
|
80
|
-
background: var(--progress-fill);
|
|
81
|
-
}
|
|
82
|
-
@keyframes linear-progress {
|
|
83
|
-
0% { margin-left: -40%; width: 40%; }
|
|
84
|
-
50% { margin-left: 30%; width: 60%; }
|
|
85
|
-
100% { margin-left: 100%; width: 40%; }
|
|
86
|
-
}
|
|
87
|
-
`],c);s([a({type:String})],e.prototype,"id",void 0);s([a({type:String,reflect:!0})],e.prototype,"type",void 0);s([a({type:Number,reflect:!0})],e.prototype,"progress",void 0);s([a({type:Boolean,attribute:"is-static"})],e.prototype,"isStatic",void 0);s([a({type:String,reflect:!0})],e.prototype,"spacing",void 0);s([a({type:String,attribute:"spacing-top",reflect:!0})],e.prototype,"spacingTop",void 0);s([a({type:String,attribute:"spacing-bottom",reflect:!0})],e.prototype,"spacingBottom",void 0);s([a({type:String,attribute:"spacing-left",reflect:!0})],e.prototype,"spacingLeft",void 0);s([a({type:String,attribute:"spacing-right",reflect:!0})],e.prototype,"spacingRight",void 0);e=s([g("scb-progress-indicator")],e);
|
|
1
|
+
import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-test-components/scb-progress-indicator/scb-progress-indicator.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(e,o,c){try{customElements.get(e)||i(e,o,c)}catch(r){var n=String(r||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();
|