@indice/ng-components 0.5.0-beta.10 → 0.5.0

package/index.d.ts

@@ -699,6 +699,8 @@ declare class SidePaneComponent implements OnInit, OnDestroy, OnChanges {
     onComplete: EventEmitter<boolean>;
     onOpen: EventEmitter<any>;
     onClose: EventEmitter<any>;
+    params: any | undefined;
+    template: TemplateRef<any> | undefined;
     constructor(router: Router, document: any);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -711,7 +713,7 @@ declare class SidePaneComponent implements OnInit, OnDestroy, OnChanges {
     show(): void;
     hide(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SidePaneComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SidePaneComponent, "lib-side-pane", never, { "showPane": { "alias": "visible"; "required": false; }; "size": { "alias": "pane-size"; "required": false; }; }, { "onComplete": "onComplete"; "onOpen": "onOpen"; "onClose": "onClose"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidePaneComponent, "lib-side-pane", never, { "showPane": { "alias": "visible"; "required": false; }; "size": { "alias": "pane-size"; "required": false; }; "params": { "alias": "params"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, { "onComplete": "onComplete"; "onOpen": "onOpen"; "onClose": "onClose"; }, never, ["*"], false, never>;
 }
 
 declare class NavLinksListComponent implements OnInit, OnDestroy {
@@ -1242,20 +1244,23 @@ declare class ShellLayoutComponent implements OnInit, OnDestroy, AfterViewInit,
     private _componentLoaderFactory;
     private _config;
     private _dynamicComponentHosts;
+    rightPane: SidePaneComponent | undefined;
     busy: boolean;
     sidebarFooterTemplate?: TemplateRef<any>;
     private _routerSub$;
-    constructor(_router: Router, _componentLoaderFactory: ComponentLoaderFactory, _config: IShellConfig | undefined);
     showRightPaneSM: boolean;
     activeConfig: IShellConfig;
     loaded: boolean;
     hideSidebar: boolean;
+    constructor(_router: Router, _componentLoaderFactory: ComponentLoaderFactory, _config: IShellConfig | undefined);
     ngAfterViewChecked(): void;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     private initCustomComponents;
     ngOnDestroy(): void;
     private loadCustomComponent;
+    onSidePaneActivated($event: any): void;
+    onSidePaneDeactivated($event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ShellLayoutComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ShellLayoutComponent, "lib-shell-layout", never, { "busy": { "alias": "busy"; "required": false; }; "sidebarFooterTemplate": { "alias": "sidebarFooterTemplate"; "required": false; }; }, {}, never, never, false, never>;
 }
@@ -1379,6 +1384,7 @@ declare class ModelViewLayoutComponent implements OnInit, OnDestroy {
     icon: string | null;
     busy: boolean;
     actions: ViewAction[] | null;
+    onAction: EventEmitter<ViewAction>;
     private optionsLoaded;
     private _options;
     selectedTab: any;
@@ -1391,8 +1397,9 @@ declare class ModelViewLayoutComponent implements OnInit, OnDestroy {
     onSidePaneDeactivated($event: any): void;
     closeSidePane(): void;
     navigateLink(link: any): void;
+    emitActionClick(action: ViewAction): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModelViewLayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModelViewLayoutComponent, "lib-model-view-layout", never, { "title": { "alias": "title"; "required": false; }; "primary": { "alias": "primary-links"; "required": false; }; "secondary": { "alias": "secondary-links"; "required": false; }; "metaItems": { "alias": "meta-items"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "busy": { "alias": "busy"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModelViewLayoutComponent, "lib-model-view-layout", never, { "title": { "alias": "title"; "required": false; }; "primary": { "alias": "primary-links"; "required": false; }; "secondary": { "alias": "secondary-links"; "required": false; }; "metaItems": { "alias": "meta-items"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "busy": { "alias": "busy"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "onAction": "onAction"; }, never, ["*"], false, never>;
 }
 
 declare class SideViewLayoutComponent implements OnInit {
@@ -1424,6 +1431,7 @@ declare class SideViewLayoutComponent implements OnInit {
 declare class FormLayoutComponent implements OnInit {
     private router$;
     private searchInput$?;
+    formPane: SidePaneComponent | undefined;
     title: string | null;
     image: string | null;
     icon: string | null;
@@ -1435,11 +1443,12 @@ declare class FormLayoutComponent implements OnInit {
     onComplete: EventEmitter<boolean>;
     constructor(router$: Router);
     ngOnInit(): void;
-    onSidePaneDeactivated($event: any): void;
     emitActionClick(action: ViewAction): void;
     searchActionClick(action: ViewAction, text: string): void;
     searchActionType(text: string): void;
     routerLinkActionClick(action: RouterViewAction | any, relative?: boolean): void;
+    onSidePaneDeactivated($event: any): void;
+    onSidePaneActivated($event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormLayoutComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FormLayoutComponent, "lib-form-layout", never, { "title": { "alias": "title"; "required": false; }; "image": { "alias": "image"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "searchPlaceholder": { "alias": "search-placeholder"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "subTitle": { "alias": "sub-title"; "required": false; }; }, { "onAction": "onAction"; "onSearch": "onSearch"; "onComplete": "onComplete"; }, never, ["*"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indice/ng-components",
-  "version": "0.5.0-beta.10",
+  "version": "0.5.0",
   "description": "Indice common components for Angular v20",
   "repository": {
     "type": "git",

package/src/assets/styles/advanced-search.css

@@ -1,39 +1,39 @@
-.advanced-search-filter {
-  @apply flex gap-6 mb-2 pr-2;
-}
-
-.advanced-search-filter-value-container {
-  @apply flex gap-6 mb-6;
-}
-
-.advanced-search-filter-value-label {
-  @apply block;
-}
-
-.advanced-search-filter-operator-label {
-  @apply block;
-}
-
-.advanced-search-filter-value-input {
-  @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
-}
-
-.advanced-search-filter-value-input-daterange-from {
-  @apply  mt-6 p-2;
-}
-
-.advanced-search-filter-value-input-daterange-to {
-  @apply  mt-6 p-2;
-}
-
-.advanced-search-chips {
-  @apply inline-flex rounded-full items-center mx-2 mb-4 py-1 pl-3 pr-1 text-sm font-medium bg-gray-300 text-gray-700;
-}
-
-.advanced-search-chips-remove-filter {
-  @apply flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none focus:bg-gray-500 focus:text-white;
-}
-
-.advanced-search-chips.disabled .advanced-search-chips-remove-filter:active {
-  @apply transform-none;
-}
+.advanced-search-filter {
+  @apply flex gap-6 mb-2 pr-2;
+}
+
+.advanced-search-filter-value-container {
+  @apply flex gap-6 mb-6;
+}
+
+.advanced-search-filter-value-label {
+  @apply block;
+}
+
+.advanced-search-filter-operator-label {
+  @apply block;
+}
+
+.advanced-search-filter-value-input {
+  @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+}
+
+.advanced-search-filter-value-input-daterange-from {
+  @apply  mt-6 p-2;
+}
+
+.advanced-search-filter-value-input-daterange-to {
+  @apply  mt-6 p-2;
+}
+
+.advanced-search-chips {
+  @apply inline-flex rounded-full items-center mx-2 mb-4 py-1 pl-3 pr-1 text-sm font-medium bg-gray-300 text-gray-700;
+}
+
+.advanced-search-chips-remove-filter {
+  @apply flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none focus:bg-gray-500 focus:text-white;
+}
+
+.advanced-search-chips.disabled .advanced-search-chips-remove-filter:active {
+  @apply transform-none;
+}

package/src/assets/styles/avatar-initials.css

@@ -1,35 +1,35 @@
-.avatar-container {
-  @apply inline-flex items-center justify-center h-8 w-8 rounded-full overflow-hidden;
-}
-
-.avatar-container-large {
-  @apply inline-flex items-center justify-center h-12 w-12 rounded-full;
-}
-
-.avatar-text {
-  @apply text-sm font-medium leading-none text-blue-300;
-}
-
-.avatar-text-large {
-  @apply text-xl font-medium leading-none text-white;
-}
-
-
-.circle {
-display: flex;
-justify-content: center;
-align-items: center;
-}
-
-.circle img {
-border-radius: 50%;
-width: 60px;
-height: 60px;
-}
-
-.circle .initials {
-color: #FFFFFF;
-font-size: 20px;
-line-height: 19px;
-letter-spacing: 0.2625px;
-}
+.avatar-container {
+  @apply inline-flex items-center justify-center h-8 w-8 rounded-full overflow-hidden;
+}
+
+.avatar-container-large {
+  @apply inline-flex items-center justify-center h-12 w-12 rounded-full;
+}
+
+.avatar-text {
+  @apply text-sm font-medium leading-none text-blue-300;
+}
+
+.avatar-text-large {
+  @apply text-xl font-medium leading-none text-white;
+}
+
+
+.circle {
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+.circle img {
+border-radius: 50%;
+width: 60px;
+height: 60px;
+}
+
+.circle .initials {
+color: #FFFFFF;
+font-size: 20px;
+line-height: 19px;
+letter-spacing: 0.2625px;
+}

package/src/assets/styles/base.css

@@ -1,36 +1,36 @@
-@reference tailwindcss;
-
-@layer base {
-  html {
-    scroll-behavior: smooth !important;
-  }
-  
-  input {
-    outline: none;
-  }
-  
-  input[type=number] {
-    outline: none;
-  }
-  
-  textarea {
-    outline: none;
-  }
-  
-  h1 {
-    @apply text-2xl;
-  }
-
-  h2 {
-    @apply text-xl;
-  }
-
-  h3 {
-    @apply text-lg;
-  }
-
-  a {
-    @apply text-gray-600;
-  }
-   
-}
+@reference tailwindcss;
+
+@layer base {
+  html {
+    scroll-behavior: smooth !important;
+  }
+  
+  input {
+    outline: none;
+  }
+  
+  input[type=number] {
+    outline: none;
+  }
+  
+  textarea {
+    outline: none;
+  }
+  
+  h1 {
+    @apply text-2xl;
+  }
+
+  h2 {
+    @apply text-xl;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+
+  a {
+    @apply text-gray-600;
+  }
+   
+}

package/src/assets/styles/cards.css

@@ -1,84 +1,84 @@
-.card-deck-busy{
-  @apply animate-pulse;
-}
-  
-.cards-deck-1 {
-  @apply grid grid-cols-1 gap-0 sm:grid-cols-1 lg:grid-cols-1;
-}
-
-.cards-deck-2 {
-  @apply grid grid-cols-1 gap-5 sm:grid-cols-1 lg:grid-cols-2;
-}
-
-.cards-deck-3 {
-  @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3;
-}
-
-.cards-deck-4 {
-  @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4;
-}
-
-.card {
-  @apply relative h-full border border-gray-200 bg-gray-50 shadow-sm rounded-lg sm:rounded-3xl overflow-hidden;;
-}
-
-.card-body {
-  @apply pt-2 px-4 pb-12 sm:pt-6 sm:px-6;
-}
-
-.card-img-top {
-  @apply object-cover w-full h-48;
-}
-
-.card-header {
-  @apply inset-x-0 px-4 py-6 sm:py-4 sm:px-6 border-b bg-white border-gray-200;
-}
-
-.card-footer {
-  @apply absolute bottom-0 inset-x-0 bg-white px-4 py-4 sm:px-6 border-t border-gray-200;
-}
-
-.kpi-tile-title-container {
-  @apply  uppercase mb-2 overflow-ellipsis overflow-hidden;
-}
-
-.kpi-tile-action {
-  @apply hover:text-gray-500;
-}
-
-.kpi-tile-value {
-  @apply text-6xl font-thin my-6;
-}
-
-.gallery-deck-1 {
-  @apply grid grid-cols-1 p-4 gap-x-6 sm:grid-cols-2;
-}
-
-.gallery-deck-2 {
-  @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 p-4;
-}
-  
-.gallery-deck-3 {
-  @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 p-4;
-}
-  
-.gallery-deck-4 {
-  @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 p-4;
-}
-
-.tile-card-footer {
-  @apply absolute bottom-0 inset-x-0 bg-gradient-to-b from-transparent to-gray-50 px-2 pb-4 sm:px-4;
-}
-
-.tile-card-item-btn {
-  @apply inline-flex mx-1 items-center rounded-full border border-transparent p-1 text-white shadow-sm focus:outline-none;
-}
-  
-.tile-card-item-btn-selected {
-  @apply bg-slate-700 ring-slate-700 ring-1 ring-offset-1;
-}
-
-.tile-card-item-btn-available {
-  @apply bg-slate-500 hover:bg-slate-700 ring-0;
-}
-
+.card-deck-busy{
+  @apply animate-pulse;
+}
+  
+.cards-deck-1 {
+  @apply grid grid-cols-1 gap-0 sm:grid-cols-1 lg:grid-cols-1;
+}
+
+.cards-deck-2 {
+  @apply grid grid-cols-1 gap-5 sm:grid-cols-1 lg:grid-cols-2;
+}
+
+.cards-deck-3 {
+  @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3;
+}
+
+.cards-deck-4 {
+  @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4;
+}
+
+.card {
+  @apply relative h-full border border-gray-200 bg-gray-50 shadow-sm rounded-lg sm:rounded-3xl overflow-hidden;;
+}
+
+.card-body {
+  @apply pt-2 px-4 pb-12 sm:pt-6 sm:px-6;
+}
+
+.card-img-top {
+  @apply object-cover w-full h-48;
+}
+
+.card-header {
+  @apply inset-x-0 px-4 py-6 sm:py-4 sm:px-6 border-b bg-white border-gray-200;
+}
+
+.card-footer {
+  @apply absolute bottom-0 inset-x-0 bg-white px-4 py-4 sm:px-6 border-t border-gray-200;
+}
+
+.kpi-tile-title-container {
+  @apply  uppercase mb-2 overflow-ellipsis overflow-hidden;
+}
+
+.kpi-tile-action {
+  @apply hover:text-gray-500;
+}
+
+.kpi-tile-value {
+  @apply text-6xl font-thin my-6;
+}
+
+.gallery-deck-1 {
+  @apply grid grid-cols-1 p-4 gap-x-6 sm:grid-cols-2;
+}
+
+.gallery-deck-2 {
+  @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 p-4;
+}
+  
+.gallery-deck-3 {
+  @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 p-4;
+}
+  
+.gallery-deck-4 {
+  @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 p-4;
+}
+
+.tile-card-footer {
+  @apply absolute bottom-0 inset-x-0 bg-gradient-to-b from-transparent to-gray-50 px-2 pb-4 sm:px-4;
+}
+
+.tile-card-item-btn {
+  @apply inline-flex mx-1 items-center rounded-full border border-transparent p-1 text-white shadow-sm focus:outline-none;
+}
+  
+.tile-card-item-btn-selected {
+  @apply bg-slate-700 ring-slate-700 ring-1 ring-offset-1;
+}
+
+.tile-card-item-btn-available {
+  @apply bg-slate-500 hover:bg-slate-700 ring-0;
+}
+

package/src/assets/styles/collapsible-panel.css

@@ -1,23 +1,23 @@
-.collapsible-panel-container {
-  @apply bg-white border border-gray-200 mb-2;
-}
-
-.collapsible-panel-container-shadow {
-  @apply shadow-sm;
-}
-
-.collapsible-panel-container-inner {
-  @apply relative border-b border-gray-200;
-}
-
-.collapsible-panel-button {
-  @apply w-full px-8 py-6 text-left;
-}
-
-.collapsible-panel-button-content-container {
-  @apply flex items-center justify-between;
-}
-
-.collapsible-panel-content-container {
-  @apply relative overflow-hidden transition-all duration-700;
-}
+.collapsible-panel-container {
+  @apply bg-white border border-gray-200 mb-2;
+}
+
+.collapsible-panel-container-shadow {
+  @apply shadow-sm;
+}
+
+.collapsible-panel-container-inner {
+  @apply relative border-b border-gray-200;
+}
+
+.collapsible-panel-button {
+  @apply w-full px-8 py-6 text-left;
+}
+
+.collapsible-panel-button-content-container {
+  @apply flex items-center justify-between;
+}
+
+.collapsible-panel-content-container {
+  @apply relative overflow-hidden transition-all duration-700;
+}

package/src/assets/styles/combobox.css

@@ -1,27 +1,27 @@
-.combobox-wrapper {
-    @apply relative mt-1;
-}
-
-.combobox-input {
-    @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
-}
-
-.combobox-icons {
-    @apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none;
-}
-
-.combobox-results {
-    @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-black/5 focus:outline-none sm:text-sm;
-}
-
-.combobox-default-item-template {
-    @apply hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate;
-}
-
-.combobox-selected-item-wrapper {
-    @apply relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400;
-}
-
-.combobox-selected-item-remove-btn {
-    @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500;
-}
+.combobox-wrapper {
+    @apply relative mt-1;
+}
+
+.combobox-input {
+    @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+}
+
+.combobox-icons {
+    @apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none;
+}
+
+.combobox-results {
+    @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-black/5 focus:outline-none sm:text-sm;
+}
+
+.combobox-default-item-template {
+    @apply hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate;
+}
+
+.combobox-selected-item-wrapper {
+    @apply relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400;
+}
+
+.combobox-selected-item-remove-btn {
+    @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500;
+}

package/src/assets/styles/components.css

@@ -1,34 +1,34 @@
-.md-visible {
-  @apply hidden md:block;
-}
-
-.btn-outline {
-  @apply focus:outline-none bg-transparent text-gray-700 text-sm hover:text-gray-800 px-2.5 py-1.5 border border-gray-500 hover:border-gray-600 rounded-sm;
-}
-
-.btn-outline:disabled {
-  @apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm cursor-not-allowed;
-}
-
-
-.btn-view-header {
-  @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800;
-}
-
-
-.sidebar .btn-view-header {
-  @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800 hover:text-white;
-}
-
-.btn-form-view-header {
-  @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
-}
-
-.btn-form-view-header-search {
-  @apply rounded-l-none text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
-}
-
-.selected-view-indicator {
-  @apply absolute top-0 right-0 block ml-2 h-1.5 w-1.5 rounded-full ring-1 ring-white bg-blue-300;
-}
-
+.md-visible {
+  @apply hidden md:block;
+}
+
+.btn-outline {
+  @apply focus:outline-none bg-transparent text-gray-700 text-sm hover:text-gray-800 px-2.5 py-1.5 border border-gray-500 hover:border-gray-600 rounded-sm;
+}
+
+.btn-outline:disabled {
+  @apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm cursor-not-allowed;
+}
+
+
+.btn-view-header {
+  @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800;
+}
+
+
+.sidebar .btn-view-header {
+  @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800 hover:text-white;
+}
+
+.btn-form-view-header {
+  @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
+}
+
+.btn-form-view-header-search {
+  @apply rounded-l-none text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
+}
+
+.selected-view-indicator {
+  @apply absolute top-0 right-0 block ml-2 h-1.5 w-1.5 rounded-full ring-1 ring-white bg-blue-300;
+}
+