@functionalcms/svelte-components 2.3.4 → 2.3.6

package/dist/components/Banner.svelte

@@ -1,9 +1,14 @@
-<script>export let background = "";
+<script>import { Justify, AlignItmes } from "./Styling.js";
+export let background = "";
 export let css = "";
+export let justify = Justify.Start;
+export let alignItems = AlignItmes.Start;
 $:
   klasses = [
     "flex",
-    css ? css : ""
+    css ? css : "",
+    `${justify}`,
+    `${alignItems}`
   ].filter((c) => c).join(" ");
 </script>
 

package/dist/components/Banner.svelte.d.ts

@@ -1,8 +1,11 @@
 import { SvelteComponent } from "svelte";
+import { Justify, AlignItmes } from "./Styling.js";
 declare const __propDef: {
     props: {
         background?: string | undefined;
         css?: string | undefined;
+        justify?: Justify | undefined;
+        alignItems?: AlignItmes | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Styling.d.ts

@@ -1,9 +1,16 @@
 export declare enum Justify {
-    Start = "start",
-    End = "end",
-    Center = "center",
-    Between = "between",
-    Around = "around"
+    Start = "justify-start",
+    End = "justify-end",
+    Center = "justify-center",
+    Between = "justify-between",
+    Around = "justify-around"
+}
+export declare enum AlignItmes {
+    Start = "items-start ",
+    End = "items-end",
+    Center = "items-center",
+    Baseline = "items-baseline",
+    Stretch = "items-stretch"
 }
 export declare enum Placement {
     Start = "start",
@@ -14,9 +21,9 @@ export declare enum Placement {
     Content = "content"
 }
 export declare enum Orientation {
-    Row = "row",
-    Column = "column",
-    DynamicRow = "row-dynamic"
+    Row = "flex-row",
+    Column = "flex-column",
+    DynamicRow = "flex-row-dynamic"
 }
 export declare enum Position {
     Left = 0,

package/dist/components/Styling.js

@@ -1,11 +1,19 @@
 export var Justify;
 (function (Justify) {
-    Justify["Start"] = "start";
-    Justify["End"] = "end";
-    Justify["Center"] = "center";
-    Justify["Between"] = "between";
-    Justify["Around"] = "around";
+    Justify["Start"] = "justify-start";
+    Justify["End"] = "justify-end";
+    Justify["Center"] = "justify-center";
+    Justify["Between"] = "justify-between";
+    Justify["Around"] = "justify-around";
 })(Justify || (Justify = {}));
+export var AlignItmes;
+(function (AlignItmes) {
+    AlignItmes["Start"] = "items-start ";
+    AlignItmes["End"] = "items-end";
+    AlignItmes["Center"] = "items-center";
+    AlignItmes["Baseline"] = "items-baseline";
+    AlignItmes["Stretch"] = "items-stretch";
+})(AlignItmes || (AlignItmes = {}));
 export var Placement;
 (function (Placement) {
     Placement["Start"] = "start";
@@ -17,9 +25,9 @@ export var Placement;
 })(Placement || (Placement = {}));
 export var Orientation;
 (function (Orientation) {
-    Orientation["Row"] = "row";
-    Orientation["Column"] = "column";
-    Orientation["DynamicRow"] = "row-dynamic";
+    Orientation["Row"] = "flex-row";
+    Orientation["Column"] = "flex-column";
+    Orientation["DynamicRow"] = "flex-row-dynamic";
 })(Orientation || (Orientation = {}));
 export var Position;
 (function (Position) {

package/dist/components/Well.svelte

@@ -12,14 +12,18 @@
     }
 </style>
 
-<script>import { Orientation } from "./Styling.js";
+<script>import { AlignItmes, Justify, Orientation, Position } from "./Styling.js";
 export let css = "";
 export let orientation = Orientation.Column;
+export let justify = Justify.Start;
+export let alignItems = AlignItmes.Start;
 $:
   klasses = [
     "flex",
     css ? css : "",
-    `flex-${orientation}`
+    `${orientation}`,
+    `${justify}`,
+    `${alignItems}`
   ].filter((c) => c).join(" ");
 </script>
 

package/dist/components/Well.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponent } from "svelte";
-import { Orientation } from "./Styling.js";
+import { AlignItmes, Justify, Orientation } from "./Styling.js";
 declare const __propDef: {
     props: {
         css?: string | undefined;
         orientation?: Orientation | undefined;
+        justify?: Justify | undefined;
+        alignItems?: AlignItmes | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -10,6 +10,6 @@ import Well from './components/Well.svelte';
 import { title, suffix } from './stores/title.js';
 import { pages } from './stores/pages.js';
 import { metaDescription, metaKeywords } from './stores/meta.js';
-import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
+import { Placement, Orientation, Position, Sizes, AlignItmes } from './components/Styling.js';
 import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
-export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, DefaultLayout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
+export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, DefaultLayout, Logo, SimpleFooter, Spacer, Well, Placement, Orientation, AlignItmes, Position, Sizes, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };

package/dist/index.js

@@ -11,6 +11,6 @@ import Well from './components/Well.svelte';
 import { title, suffix } from './stores/title.js';
 import { pages } from './stores/pages.js';
 import { metaDescription, metaKeywords } from './stores/meta.js';
-import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
+import { Justify, Placement, Orientation, Position, Sizes, AlignItmes } from './components/Styling.js';
 import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
-export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, DefaultLayout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
+export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, DefaultLayout, Logo, SimpleFooter, Spacer, Well, Placement, Orientation, AlignItmes, Position, Sizes, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.3.4",
+	"version": "2.3.6",
 	"watch": {
 		"build": {
 			"patterns": ["src"],