@getflip/swirl-components 0.40.1 → 0.42.0

package/dist/types/components/swirl-pagination/swirl-pagination.d.ts

@@ -9,13 +9,19 @@ export declare class SwirlPagination {
   pageLabel?: string;
   pages: number;
   pageSelectLabel?: string;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  pageSizeSelectLabel?: string;
   prevButtonLabel?: string;
+  showPageSizeSelect?: boolean;
   variant?: SwirlPaginationVariant;
   setPage: EventEmitter<number>;
+  setPageSize: EventEmitter<number>;
   private onFirstPageButtonClick;
   private onLastPageButtonClick;
   private onPrevButtonClick;
   private onNextButtonClick;
   private onSelect;
+  private onPageSizeSelect;
   render(): any;
 }

package/dist/types/components/swirl-tab-bar/swirl-tab-bar.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+export type SwirlTabBarTab = {
+  active?: boolean;
+  id: string;
+  label: string;
+};
+export declare class SwirlTabBar {
+  disableTabSemantics?: boolean;
+  label: string;
+  tabs: SwirlTabBarTab[];
+  activateNextTab: EventEmitter<void>;
+  activatePreviousTab: EventEmitter<void>;
+  activateTab: EventEmitter<string>;
+  private onKeyDown;
+  render(): any;
+}

package/dist/types/components/swirl-tab-bar/swirl-tab-bar.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="mdx" />
+import Docs from "./swirl-tab-bar.mdx";
+declare const _default: {
+  component: string;
+  parameters: {
+    docs: {
+      page: typeof Docs;
+    };
+  };
+  title: string;
+};
+export default _default;
+export declare const SwirlTabBar: any;

package/dist/types/components/swirl-tabs/swirl-tabs.d.ts

@@ -1,9 +1,11 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { SwirlTabBarTab } from "../swirl-tab-bar/swirl-tab-bar";
 export declare class SwirlTabs {
   el: HTMLElement;
   initialTab?: string;
   label: string;
   activeTab?: string;
+  tabBarTabs: SwirlTabBarTab[];
   tabActivated: EventEmitter<HTMLSwirlTabElement>;
   private tabs;
   componentWillLoad(): void;
@@ -15,6 +17,9 @@ export declare class SwirlTabs {
   private activateNextTab;
   private activatePreviousTab;
   private collectTabs;
-  private onKeyDown;
+  private updateTabBarTabs;
+  private onActivateNextTab;
+  private onActivatePreviousTab;
+  private onActivateTab;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -44,6 +44,7 @@ import { SwirlSkeletonTextSize } from "./components/swirl-skeleton-text/swirl-sk
 import { SwirlSpinnerSize } from "./components/swirl-spinner/swirl-spinner";
 import { SwirlStackAlign, SwirlStackJustify, SwirlStackOrientation, SwirlStackSpacing } from "./components/swirl-stack/swirl-stack";
 import { SwirlSwitchSize } from "./components/swirl-switch/swirl-switch";
+import { SwirlTabBarTab } from "./components/swirl-tab-bar/swirl-tab-bar";
 import { SwirlTableColumnSort } from "./components/swirl-table-column/swirl-table-column";
 import { SwirlTagIntent } from "./components/swirl-tag/swirl-tag";
 import { SwirlTextAlign, SwirlTextColor, SwirlTextFontStyle, SwirlTextSize, SwirlTextWeight } from "./components/swirl-text/swirl-text";
@@ -92,6 +93,7 @@ export { SwirlSkeletonTextSize } from "./components/swirl-skeleton-text/swirl-sk
 export { SwirlSpinnerSize } from "./components/swirl-spinner/swirl-spinner";
 export { SwirlStackAlign, SwirlStackJustify, SwirlStackOrientation, SwirlStackSpacing } from "./components/swirl-stack/swirl-stack";
 export { SwirlSwitchSize } from "./components/swirl-switch/swirl-switch";
+export { SwirlTabBarTab } from "./components/swirl-tab-bar/swirl-tab-bar";
 export { SwirlTableColumnSort } from "./components/swirl-table-column/swirl-table-column";
 export { SwirlTagIntent } from "./components/swirl-tag/swirl-tag";
 export { SwirlTextAlign, SwirlTextColor, SwirlTextFontStyle, SwirlTextSize, SwirlTextWeight } from "./components/swirl-text/swirl-text";
@@ -905,8 +907,12 @@ export namespace Components {
         "page": number;
         "pageLabel"?: string;
         "pageSelectLabel"?: string;
+        "pageSize"?: number;
+        "pageSizeOptions"?: number[];
+        "pageSizeSelectLabel"?: string;
         "pages": number;
         "prevButtonLabel"?: string;
+        "showPageSizeSelect"?: boolean;
         "variant"?: SwirlPaginationVariant;
     }
     interface SwirlPdfReader {
@@ -1081,6 +1087,11 @@ export namespace Components {
         "label": string;
         "tabId": string;
     }
+    interface SwirlTabBar {
+        "disableTabSemantics"?: boolean;
+        "label": string;
+        "tabs": SwirlTabBarTab[];
+    }
     interface SwirlTable {
         "caption"?: string;
         "emptyStateLabel"?: string;
@@ -1359,6 +1370,10 @@ export interface SwirlSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSwirlSwitchElement;
 }
+export interface SwirlTabBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSwirlTabBarElement;
+}
 export interface SwirlTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSwirlTabsElement;
@@ -2404,6 +2419,12 @@ declare global {
         prototype: HTMLSwirlTabElement;
         new (): HTMLSwirlTabElement;
     };
+    interface HTMLSwirlTabBarElement extends Components.SwirlTabBar, HTMLStencilElement {
+    }
+    var HTMLSwirlTabBarElement: {
+        prototype: HTMLSwirlTabBarElement;
+        new (): HTMLSwirlTabBarElement;
+    };
     interface HTMLSwirlTableElement extends Components.SwirlTable, HTMLStencilElement {
     }
     var HTMLSwirlTableElement: {
@@ -2676,6 +2697,7 @@ declare global {
         "swirl-stack": HTMLSwirlStackElement;
         "swirl-switch": HTMLSwirlSwitchElement;
         "swirl-tab": HTMLSwirlTabElement;
+        "swirl-tab-bar": HTMLSwirlTabBarElement;
         "swirl-table": HTMLSwirlTableElement;
         "swirl-table-cell": HTMLSwirlTableCellElement;
         "swirl-table-column": HTMLSwirlTableColumnElement;
@@ -3433,11 +3455,16 @@ declare namespace LocalJSX {
         "lastPageButtonLabel"?: string;
         "nextButtonLabel"?: string;
         "onSetPage"?: (event: SwirlPaginationCustomEvent<number>) => void;
+        "onSetPageSize"?: (event: SwirlPaginationCustomEvent<number>) => void;
         "page": number;
         "pageLabel"?: string;
         "pageSelectLabel"?: string;
+        "pageSize"?: number;
+        "pageSizeOptions"?: number[];
+        "pageSizeSelectLabel"?: string;
         "pages": number;
         "prevButtonLabel"?: string;
+        "showPageSizeSelect"?: boolean;
         "variant"?: SwirlPaginationVariant;
     }
     interface SwirlPdfReader {
@@ -3597,6 +3624,14 @@ declare namespace LocalJSX {
         "label": string;
         "tabId": string;
     }
+    interface SwirlTabBar {
+        "disableTabSemantics"?: boolean;
+        "label": string;
+        "onActivateNextTab"?: (event: SwirlTabBarCustomEvent<void>) => void;
+        "onActivatePreviousTab"?: (event: SwirlTabBarCustomEvent<void>) => void;
+        "onActivateTab"?: (event: SwirlTabBarCustomEvent<string>) => void;
+        "tabs"?: SwirlTabBarTab[];
+    }
     interface SwirlTable {
         "caption"?: string;
         "emptyStateLabel"?: string;
@@ -3890,6 +3925,7 @@ declare namespace LocalJSX {
         "swirl-stack": SwirlStack;
         "swirl-switch": SwirlSwitch;
         "swirl-tab": SwirlTab;
+        "swirl-tab-bar": SwirlTabBar;
         "swirl-table": SwirlTable;
         "swirl-table-cell": SwirlTableCell;
         "swirl-table-column": SwirlTableColumn;
@@ -4092,6 +4128,7 @@ declare module "@stencil/core" {
             "swirl-stack": LocalJSX.SwirlStack & JSXBase.HTMLAttributes<HTMLSwirlStackElement>;
             "swirl-switch": LocalJSX.SwirlSwitch & JSXBase.HTMLAttributes<HTMLSwirlSwitchElement>;
             "swirl-tab": LocalJSX.SwirlTab & JSXBase.HTMLAttributes<HTMLSwirlTabElement>;
+            "swirl-tab-bar": LocalJSX.SwirlTabBar & JSXBase.HTMLAttributes<HTMLSwirlTabBarElement>;
             "swirl-table": LocalJSX.SwirlTable & JSXBase.HTMLAttributes<HTMLSwirlTableElement>;
             "swirl-table-cell": LocalJSX.SwirlTableCell & JSXBase.HTMLAttributes<HTMLSwirlTableCellElement>;
             "swirl-table-column": LocalJSX.SwirlTableColumn & JSXBase.HTMLAttributes<HTMLSwirlTableColumnElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components",
-  "version": "0.40.1",
+  "version": "0.42.0",
   "description": "Swirl Design System Web Component Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/vscode-data.json

@@ -3633,6 +3633,14 @@
           "name": "page-select-label",
           "description": ""
         },
+        {
+          "name": "page-size",
+          "description": ""
+        },
+        {
+          "name": "page-size-select-label",
+          "description": ""
+        },
         {
           "name": "pages",
           "description": ""
@@ -3641,6 +3649,10 @@
           "name": "prev-button-label",
           "description": ""
         },
+        {
+          "name": "show-page-size-select",
+          "description": ""
+        },
         {
           "name": "variant",
           "description": "",
@@ -4482,6 +4494,23 @@
         }
       ]
     },
+    {
+      "name": "swirl-tab-bar",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disable-tab-semantics",
+          "description": ""
+        },
+        {
+          "name": "label",
+          "description": ""
+        }
+      ]
+    },
     {
       "name": "swirl-table",
       "description": {

package/dist/swirl-components/p-3c2325ba.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,h as a,H as s}from"./p-05c15d47.js";import{c as n}from"./p-b7898321.js";const e=class{constructor(a){i(this,a),this.setPage=t(this,"setPage",7),this.onFirstPageButtonClick=()=>{1!==this.page&&this.setPage.emit(1)},this.onLastPageButtonClick=()=>{this.page!==this.pages&&this.setPage.emit(this.pages)},this.onPrevButtonClick=()=>{const i=Math.max(this.page-1,1);this.page!==i&&this.setPage.emit(i)},this.onNextButtonClick=()=>{const i=Math.min(this.page+1,this.pages);this.page!==i&&this.setPage.emit(i)},this.onSelect=i=>{const t=+i.target.value;this.page!==t&&this.setPage.emit(t)},this.firstPageButtonLabel="First page",this.lastPageButtonLabel="Last page",this.label=void 0,this.nextButtonLabel="Next page",this.page=void 0,this.pageLabel="out of",this.pages=void 0,this.pageSelectLabel="Select a page",this.prevButtonLabel="Previous page",this.variant="default"}render(){const i="simple"!==this.variant,t="advanced"===this.variant,e=`${this.page} ${this.pageLabel} ${this.pages}`,o=n("pagination",`pagination--variant-${this.variant}`);return a(s,null,a("nav",{"aria-label":this.label,class:o},a("ul",{class:"pagination__list",part:"pagination__list"},a("li",{class:"pagination__list-item"},a("swirl-button",{class:"pagination__first-page-button",disabled:this.page<=1,hideLabel:!0,icon:"<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>",intent:"primary",label:this.firstPageButtonLabel,onClick:this.onFirstPageButtonClick})),a("li",{class:"pagination__list-item"},a("swirl-button",{class:"pagination__prev-button",disabled:this.page<=1,hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",intent:"primary",label:this.prevButtonLabel,onClick:this.onPrevButtonClick})),i?a("li",{class:"pagination__list-item  pagination__page-label"},a("span",null,t?a("span",{"aria-current":"page",class:"pagination__advanced-label"},a("span",{class:"pagination__page-select-container"},a("select",{"aria-label":this.pageSelectLabel,class:"pagination__page-select",onChange:this.onSelect},new Array(this.pages).fill(void 0).map(((i,t)=>t+1)).map((i=>a("option",{selected:this.page===i,value:String(i)},i))))),a("span",{"aria-hidden":"true"},this.pageLabel," ",this.pages)):a("span",{"aria-current":"page"},e))):a("li",{class:"pagination__list-item"},a("swirl-visually-hidden",null,a("span",{"aria-current":"page"},e))),a("li",{class:"pagination__list-item"},a("swirl-button",{class:"pagination__next-button",disabled:this.page>=this.pages,hideLabel:!0,icon:"<swirl-icon-chevron-right></swirl-icon-chevron-right>",iconPosition:"end",intent:"primary",label:this.nextButtonLabel,onClick:this.onNextButtonClick})),a("li",{class:"pagination__list-item"},a("swirl-button",{class:"pagination__last-page-button",disabled:this.page>=this.pages,hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",intent:"primary",label:this.lastPageButtonLabel,onClick:this.onLastPageButtonClick})))))}};e.style=":host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:0}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.pagination__page-label{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);border:none;border-radius:var(--s-border-radius-sm);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong);-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus:not(:focus-visible){outline:none}.pagination__page-select:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";export{e as swirl_pagination}

package/dist/swirl-components/p-9ef30977.entry.js

@@ -1 +0,0 @@
-import{r as t,c as s,h as a,H as i,g as r}from"./p-05c15d47.js";import{c as e}from"./p-b7898321.js";const o=class{constructor(a){t(this,a),this.tabActivated=s(this,"tabActivated",7),this.tabs=[],this.onKeyDown=t=>{"ArrowLeft"===t.code?(t.preventDefault(),this.activatePreviousTab()):"ArrowRight"===t.code&&(t.preventDefault(),this.activateNextTab())},this.initialTab=void 0,this.label=void 0,this.activeTab=void 0}componentWillLoad(){this.collectTabs()}async activateTab(t){if(this.activeTab===t)return;this.activeTab=t,this.tabs.forEach((t=>t.active=!1));const s=this.tabs.find((s=>s.tabId===t));Boolean(s)&&(s.active=!0,this.tabActivated.emit(s))}activateNextTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),s=Math.min(this.tabs.length-1,t+1);this.activateTab(this.tabs[s].tabId),requestAnimationFrame((()=>{var t;null===(t=this.el.querySelector(".tabs__tab--active"))||void 0===t||t.focus()}))}activatePreviousTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),s=Math.max(0,t-1);this.activateTab(this.tabs[s].tabId),requestAnimationFrame((()=>{var t;null===(t=this.el.querySelector(".tabs__tab--active"))||void 0===t||t.focus()}))}collectTabs(){if(this.tabs=Array.from(this.el.querySelectorAll("swirl-tab")),0===this.tabs.length)return;const t=this.tabs.find((t=>t.tabId===this.initialTab));this.activateTab(Boolean(t)?t.tabId:this.tabs[0].tabId)}render(){return a(i,null,a("div",{class:"tabs"},a("div",{"aria-label":this.label,class:"tabs__tab-bar",onKeyDown:this.onKeyDown,role:"tablist"},this.tabs.map((t=>{const s=t.tabId===this.activeTab,i=e("tabs__tab",{"tabs__tab--active":s});return a("button",{"aria-controls":t.tabId,"aria-selected":s?"true":"false",class:i,id:`tab-${t.tabId}`,key:t.tabId,onClick:()=>this.activateTab(t.tabId),role:"tab",tabIndex:s?0:-1,type:"button"},a("span",{class:"tabs__tab-label"},t.label))}))),a("slot",null)))}get el(){return r(this)}};o.style='.sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}.tabs__tab-bar.sc-swirl-tabs{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tabs__tab.sc-swirl-tabs{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-swirl-tabs:focus{outline:none}.tabs__tab.sc-swirl-tabs:focus-visible .tabs__tab-label.sc-swirl-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-swirl-tabs:not(.tabs__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tabs__tab.sc-swirl-tabs{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tabs__tab-label.sc-swirl-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-swirl-tabs{color:var(--s-text-highlight)}.tabs__tab--active.sc-swirl-tabs:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}';export{o as swirl_tabs}