@enigmatry/scss-foundation 1.0.178

package/coverage/lcov-report/sorter.js

@@ -0,0 +1,196 @@
+/* eslint-disable */
+var addSorting = (function() {
+    'use strict';
+    var cols,
+        currentSort = {
+            index: 0,
+            desc: false
+        };
+
+    // returns the summary table element
+    function getTable() {
+        return document.querySelector('.coverage-summary');
+    }
+    // returns the thead element of the summary table
+    function getTableHeader() {
+        return getTable().querySelector('thead tr');
+    }
+    // returns the tbody element of the summary table
+    function getTableBody() {
+        return getTable().querySelector('tbody');
+    }
+    // returns the th element for nth column
+    function getNthColumn(n) {
+        return getTableHeader().querySelectorAll('th')[n];
+    }
+
+    function onFilterInput() {
+        const searchValue = document.getElementById('fileSearch').value;
+        const rows = document.getElementsByTagName('tbody')[0].children;
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            if (
+                row.textContent
+                    .toLowerCase()
+                    .includes(searchValue.toLowerCase())
+            ) {
+                row.style.display = '';
+            } else {
+                row.style.display = 'none';
+            }
+        }
+    }
+
+    // loads the search box
+    function addSearchBox() {
+        var template = document.getElementById('filterTemplate');
+        var templateClone = template.content.cloneNode(true);
+        templateClone.getElementById('fileSearch').oninput = onFilterInput;
+        template.parentElement.appendChild(templateClone);
+    }
+
+    // loads all columns
+    function loadColumns() {
+        var colNodes = getTableHeader().querySelectorAll('th'),
+            colNode,
+            cols = [],
+            col,
+            i;
+
+        for (i = 0; i < colNodes.length; i += 1) {
+            colNode = colNodes[i];
+            col = {
+                key: colNode.getAttribute('data-col'),
+                sortable: !colNode.getAttribute('data-nosort'),
+                type: colNode.getAttribute('data-type') || 'string'
+            };
+            cols.push(col);
+            if (col.sortable) {
+                col.defaultDescSort = col.type === 'number';
+                colNode.innerHTML =
+                    colNode.innerHTML + '<span class="sorter"></span>';
+            }
+        }
+        return cols;
+    }
+    // attaches a data attribute to every tr element with an object
+    // of data values keyed by column name
+    function loadRowData(tableRow) {
+        var tableCols = tableRow.querySelectorAll('td'),
+            colNode,
+            col,
+            data = {},
+            i,
+            val;
+        for (i = 0; i < tableCols.length; i += 1) {
+            colNode = tableCols[i];
+            col = cols[i];
+            val = colNode.getAttribute('data-value');
+            if (col.type === 'number') {
+                val = Number(val);
+            }
+            data[col.key] = val;
+        }
+        return data;
+    }
+    // loads all row data
+    function loadData() {
+        var rows = getTableBody().querySelectorAll('tr'),
+            i;
+
+        for (i = 0; i < rows.length; i += 1) {
+            rows[i].data = loadRowData(rows[i]);
+        }
+    }
+    // sorts the table using the data for the ith column
+    function sortByIndex(index, desc) {
+        var key = cols[index].key,
+            sorter = function(a, b) {
+                a = a.data[key];
+                b = b.data[key];
+                return a < b ? -1 : a > b ? 1 : 0;
+            },
+            finalSorter = sorter,
+            tableBody = document.querySelector('.coverage-summary tbody'),
+            rowNodes = tableBody.querySelectorAll('tr'),
+            rows = [],
+            i;
+
+        if (desc) {
+            finalSorter = function(a, b) {
+                return -1 * sorter(a, b);
+            };
+        }
+
+        for (i = 0; i < rowNodes.length; i += 1) {
+            rows.push(rowNodes[i]);
+            tableBody.removeChild(rowNodes[i]);
+        }
+
+        rows.sort(finalSorter);
+
+        for (i = 0; i < rows.length; i += 1) {
+            tableBody.appendChild(rows[i]);
+        }
+    }
+    // removes sort indicators for current column being sorted
+    function removeSortIndicators() {
+        var col = getNthColumn(currentSort.index),
+            cls = col.className;
+
+        cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
+        col.className = cls;
+    }
+    // adds sort indicators for current column being sorted
+    function addSortIndicators() {
+        getNthColumn(currentSort.index).className += currentSort.desc
+            ? ' sorted-desc'
+            : ' sorted';
+    }
+    // adds event listeners for all sorter widgets
+    function enableUI() {
+        var i,
+            el,
+            ithSorter = function ithSorter(i) {
+                var col = cols[i];
+
+                return function() {
+                    var desc = col.defaultDescSort;
+
+                    if (currentSort.index === i) {
+                        desc = !currentSort.desc;
+                    }
+                    sortByIndex(i, desc);
+                    removeSortIndicators();
+                    currentSort.index = i;
+                    currentSort.desc = desc;
+                    addSortIndicators();
+                };
+            };
+        for (i = 0; i < cols.length; i += 1) {
+            if (cols[i].sortable) {
+                // add the click event handler on the th so users
+                // dont have to click on those tiny arrows
+                el = getNthColumn(i).querySelector('.sorter').parentElement;
+                if (el.addEventListener) {
+                    el.addEventListener('click', ithSorter(i));
+                } else {
+                    el.attachEvent('onclick', ithSorter(i));
+                }
+            }
+        }
+    }
+    // adds sorting functionality to the UI
+    return function() {
+        if (!getTable()) {
+            return;
+        }
+        cols = loadColumns();
+        loadData();
+        addSearchBox();
+        addSortIndicators();
+        enableUI();
+    };
+})();
+
+window.addEventListener('load', addSorting);

package/dist/scss-foundation-modules.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"scss-foundation-modules.css"}

package/dist/scss-foundation.css

@@ -0,0 +1 @@
+.first-letter-capitalized{display:inline-block}.first-letter-capitalized::first-letter{text-transform:capitalize}.capitalized{text-transform:uppercase}/*# sourceMappingURL=scss-foundation.css.map */

package/dist/scss-foundation.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/partials/core/fonts/_text-control.scss"],"names":[],"mappings":"AAAA,0BACC,qBAEA,wCACC,0BAIF,aACC","file":"scss-foundation.css"}

package/docs/absolute-positioning.md

@@ -0,0 +1,27 @@
+# Absolute positioning methods
+
+Alignment utilities for absolute positioning of content.
+
+## Absolute
+
+@use scss-foundation/src/position/absolute;
+
+- Replaces the several most common lines in absolute positioning with just one liner.
+```
+@include absolute.position($top, $right, $bottom, $left);
+```
+All arguments are optional and default to 0. Sets following properties:
+```
+	position: absolute;
+	top: $top;
+	right: $right;
+	bottom: $bottom;
+	left: $left;
+```
+
+- Replaces the several most common lines in absolute positioning for unset values with just one liner.
+```
+@include absolute.position-unset($top, $right, $bottom, $left);
+```
+All arguments are optional and default to unset. Sets the same properties as in previous method.
+

package/docs/alignment.md

@@ -0,0 +1,38 @@
+# Alignment methods
+
+Alignment utilities for positioning items using flex.
+
+## Items
+
+@use scss-foundation/src/display/items;
+
+- Center alignment. Wrapper method for following flex settings: flex direction row, justify content on flex start and align items centrally.
+```
+@include items.align-center();
+```
+- Configurable alignment. Everything is same as for the previous method, but align items property is configurable.
+```
+@include items.align($align);
+```
+- Horizontal and vertical central alignment. Wrapper method for following flex settings: flex direction row, justify content centrally and align items centrally.
+```
+@include items.align-absolute-center();
+```
+- Alignment utility. Replaces several line of CSS with just one liner. 
+```
+@include items.fully-align($align, $justify, $direction, $wrap);
+```
+Optional arguments and their default values:
+$justify: flex-start, $direction: row, $wrap: wrap
+Sets following properties:
+```
+	display: flex;
+	flex: {
+		direction: $direction;
+		wrap: $wrap;
+	};
+	align-items: $align;
+	justify-content: $justify;
+```
+
+

package/docs/breakpoints.md

@@ -0,0 +1,23 @@
+# Breakpoints methods
+
+Utilities related with application's breakpoints.
+
+## Breakpoints
+
+This module has overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
+Breakpoints must be in the same format as variables inside src root folder.
+
+Usage:
+@use scss-foundation/src/responsiveness/breakpoints;
+
+- Applies desired styles and properties starting from certain breakpoint given by its key. Key must be valid key from given (or default) breakpoint collection.
+```
+@include breakpoints.apply-on($given-size);
+```
+
+- Sets up breakpoints in a way so you can pass them to the JS from HTML. This is needed so you could have them defined only in SCSS after which you can apply some logic in JS based on that, but with only one spot for future maintenance.
+```
+@include breakpoints.set-up($with-capitalization);
+```
+Mixin defines set of properties that must be added to a certain HTML container, ideally the root one. Whatever the width of display device is, content property of it is gonna hold descriptive name for it and you can process that kind of enum insided JS and apply some logic.
+$with-capitalization argument is optional (default = true), since we're mostly using TypeScript + Angular Material which enforces capitalization.

package/docs/grid.md

@@ -0,0 +1,40 @@
+
+# Grid methods
+
+Grid heavily depends on breakpoints utilities since there's not much sense in making grid without them. On the other hand, in rare occasions if you just need row styles with auto width, independent core grid utilities might be just enough. In majority of cases, this utility is already the part of full grid so there's no need to use it manually.
+
+## Grid
+
+This module has overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
+Breakpoints must be in the same format as variables inside src root folder.
+
+@use scss-foundation/src/layout/grid;
+
+- Full grid generation. It generates everything from core grid plus all column/offset classes using syntax from Bootstrap 5, classes like col-sm-4, offset-md-10.
+```
+@include grid.generate(); // or @include grid.generate($divisions);
+```
+Default grid (as in Bootstrap) has 12 columns, but you can change that by passing a positive number parameter (between 2 and 1000).
+
+## Grid core
+
+@use scss-foundation/src/layout/grid-core as grid;
+
+ - Core generation creates styles for rows and auto width of content. You must pass prefixes for column and offset class names.
+```
+@include grid.generate($column-prefix, $offset-prefix);
+```
+
+- Reverse row generation. Integrated in full grid, but this can be also added independently if needed in your application. 
+```
+@include grid.generate-reverse-row($breakpoints);
+```
+Breakpoints are required parameter. Expected format of breakpoints is a map/dictionary with keys being unique and something descriptive to you (i.e. mobile) and value being an object defined with size (in pixels) and string description that will be seen in CSS output (i.e. sm).
+In other words:
+    **mobile: ( size: 576px, description: 'sm' )**
+For more details, please check the format of breakpoint variable inside src root folder.
+ 
+This method generates classes which helps you reverse order in row; i.e. if row had divs A, B, C and you apply reverse row class, order will be C, B, A. There are two options: 
+1) .reverse-row-DESIRED_BREAKPOINT_DESCRIPTION
+2) .reverse-dow-under-DESIRED_BREAKPOINT_DESCRIPTION
+The first one helps you to reverse order starting from given breakpoint (DESIRED_BREAKPOINT_DESCRIPTION might be sm, md, xxl, depending on what you pass as a breakpoint description). The second one helps you to reverse order on all widths under certain breakpoint.

package/docs/text-modification.md

@@ -0,0 +1,24 @@
+
+# Text-related methods
+
+From time to time we need to prettify and alter some text in HTML. Following methods help us in that.
+
+## Text Modification
+
+@use scss-foundation/src/text/modification as text-modification;
+
+- Capitalizes given string.
+```
+text-modification.capitalize('john'); // returns John
+```
+
+- Cuts off lengthy text by adding ellipsis in the end. Behavior heavily depends on context; it cannot be applied on containers with unlimited width.
+```
+@include text-modification.ellipsis();
+```
+This mixin is short-hand for following set of properties:
+```
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+```

package/jest.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+    "roots": [
+        "<rootDir>/tests/"
+    ],
+    "setupFiles": [],
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+        "**/*.scss"
+    ],
+    "transform": {},
+    "transformIgnorePatterns": [
+        "<rootDir>/node_modules/"
+    ],
+    "testMatch": ["**/tests/*.js"],
+    "testPathIgnorePatterns": [
+        "<rootDir>/node_modules/",
+    ],
+    "testEnvironment": 'jest-environment-node',
+    "moduleFileExtensions": [
+        "js"
+    ]
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@enigmatry/scss-foundation",
+  "version": "1.0.178",
+  "author": "Enigmatry",
+  "description": "Collection of SCSS utilities useful for the most of projects.",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "sass --style=compressed --load-path=src src/partials/main.scss dist/scss-foundation.css",
+    "lint": "stylelint --fix src/**/*.scss",
+    "test": "jest --coverage --colors"
+  },
+  "devDependencies": {
+    "@enigmatry/stylelint-config": "^1.0.85",
+    "sass": "1.44.0",
+    "sass-true": "6.1.0",
+    "jest": "27.5.1",
+    "stylelint": "14.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/modules/_index.scss

@@ -0,0 +1,8 @@
+@use 'display';
+@use 'layout';
+@use 'position';
+@use 'responsiveness';
+@use 'text';
+@use 'lists';
+@use 'borders';
+@use 'states';

package/src/modules/_variables.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable-next-line annotation-no-unknown */
+$testing: false !default;
+$default-breakpoints: ( 
+	mobile: ( size: 576px, description: 'sm' ), 
+	tablet: ( size: 768px, description: 'md' ), 
+	desktop: ( size: 992px, description: 'lg'), 
+	largeDesktop: ( size: 1200px, description: 'xl'),
+	extraLargeDesktop: ( size: 1400px, description: 'xxl'));

package/src/modules/borders/_border-radius.scss

@@ -0,0 +1,10 @@
+@mixin partial-border-radius($top-left: 0, $top-right: 0,  $bottom-right: 0, $bottom-left: 0) {
+	border: {
+		/* stylelint-disable scss/declaration-nested-properties */
+		top-left-radius: $top-left;
+		top-right-radius: $top-right;
+		bottom-right-radius: $bottom-right;
+		bottom-left-radius: $bottom-left;
+		/* stylelint-enable scss/declaration-nested-properties */
+	}
+}

package/src/modules/borders/_index.scss

@@ -0,0 +1 @@
+@use 'border-radius';

package/src/modules/display/_index.scss

@@ -0,0 +1 @@
+@use 'items';

package/src/modules/display/_items.scss

@@ -0,0 +1,22 @@
+@mixin align-center() {
+	@include fully-align(center);
+}
+ 
+@mixin align($align) {
+	@include fully-align($align);
+}
+ 
+ 
+@mixin align-absolute-center() {
+	@include fully-align(center, center);
+}
+ 
+@mixin fully-align($align, $justify: flex-start, $direction: row, $wrap: wrap) {
+	display: flex;
+	flex: {
+		direction: $direction;
+		wrap: $wrap;
+	};
+	align-items: $align;
+	justify-content: $justify;
+}

package/src/modules/layout/_grid-core.scss

@@ -0,0 +1,53 @@
+@use 'sass:map';
+@use '../responsiveness/breakpoints';
+
+@mixin generate($column-prefix, $offset-prefix, $spacing: 0) {
+	.row {
+		display: flex;
+		flex-wrap: wrap;
+
+		@if $spacing != 0 {
+			margin: 0 -#{$spacing};
+		}
+
+		/* stylelint-disable-next-line selector-max-attribute */
+		[class ^= #{$column-prefix}], [class ^= #{$offset-prefix}] {
+			flex-shrink: 0;
+			max-width: 100%;
+			padding: 0 $spacing;
+		}
+	}
+
+	#{'.' + $column-prefix}auto {
+		flex: 0 0 auto;
+		width: auto;
+		padding: 0 $spacing;
+	}
+}
+
+@mixin generate-reverse-row($breakpoints) {
+	$reverse-prefix: '.row.reverse-row-';
+	$under: 'under-';
+
+	@each $item, $value in $breakpoints {
+		$size: map.get($value, description);
+
+		@include breakpoints.apply-on($item) {
+			#{$reverse-prefix + $size} {
+				flex-direction: row-reverse;
+			}
+		}
+	}
+
+	@each $item, $value in $breakpoints {
+		$size: map.get($value, description);
+
+		#{$reverse-prefix + $under + $size} {
+			flex-direction: row-reverse;
+		
+			@include breakpoints.apply-on($item) {
+				flex-direction: row;
+			}
+		}
+	}
+}

package/src/modules/layout/_grid.scss

@@ -0,0 +1,86 @@
+/* stylelint-disable-next-line annotation-no-unknown */
+$breakpoints: () !default;
+
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:math';
+@use '../../modules/variables' as variables;
+@forward '../../modules/responsiveness/breakpoints' with (
+	$breakpoints: $breakpoints
+);
+@use '../../modules/responsiveness/breakpoints';
+@use '../../modules/text/modification' as text-modification;
+@use 'grid-core';
+
+@if length($breakpoints) == 0 {
+	$breakpoints: variables.$default-breakpoints;
+}
+
+$column-prefix: 'col-';
+$offset-prefix: 'offset-';
+
+@mixin generate($spacing:0, $divisions: 12) {
+	@if type-of($divisions) != number {
+		@error 'Please provide number parameter for divisions! Given value: ' + $divisions;
+	}
+
+	@if ($divisions < 2 or $divisions > 1000) {
+		@error 'Please provide positive number for divisions! Given value: ' + $divisions;
+	}
+
+	@include grid-core.generate($column-prefix, $offset-prefix, $spacing);
+	@include grid-core.generate-reverse-row($breakpoints);
+	@include -unresponsive-grid-from($spacing, $divisions);
+	@include -responsive-grid-from($spacing, $divisions);
+}
+
+@function -calculate-ratio($counter, $divisions) {
+	@return math.div(100% * $counter, $divisions);
+}
+
+@mixin -unresponsive-grid-from($spacing, $divisions) {
+	$division-limit: $divisions + 1;
+
+	@for $currentIndex from 1 to ($division-limit) {
+		$current-ratio: -calculate-ratio($currentIndex, $divisions);
+
+		#{'.' + $column-prefix + $currentIndex} {
+			flex: 0 0 auto;
+			width: $current-ratio;
+			padding: 0 $spacing;
+		}
+
+		#{'.' + $offset-prefix + $currentIndex} {
+			margin-left: $current-ratio;
+		}
+	}
+}
+
+@mixin -responsive-grid-from($spacing, $divisions) {
+	$division-limit: $divisions + 1;
+	@each $item, $value in $breakpoints {
+		$size: map.get($value, description);
+
+		@include breakpoints.apply-on($item) {
+			#{'.' + $column-prefix + $size}-auto {
+				flex: 0 0 auto;
+				width: auto;
+				padding: 0 $spacing;
+			}
+
+			@for $currentIndex from 1 to $division-limit {
+				$current-ratio: -calculate-ratio($currentIndex, $divisions);
+				$size-index-suffix: $size + '-' + $currentIndex;
+
+				#{'.' + $column-prefix + $size-index-suffix} {
+					flex: 0 0 auto;
+					width: $current-ratio;
+				}
+
+				#{'.' + $offset-prefix + $size-index-suffix} {
+					margin-left: $current-ratio;
+				}
+			}
+		}
+	}
+}

package/src/modules/layout/_index.scss

@@ -0,0 +1,2 @@
+@use 'grid';
+@use 'grid-core';

package/src/modules/lists/_index.scss

@@ -0,0 +1 @@
+@use 'row-coloring';

package/src/modules/lists/_row-coloring.scss

@@ -0,0 +1,13 @@
+@mixin odd-row-coloring($color) {
+	@include row-coloring($color, odd);
+}
+
+@mixin even-row-coloring($color) {
+	@include row-coloring($color, even);
+}
+
+@mixin row-coloring($color, $rows) {
+	&:nth-child(#{$rows}) {
+		background-color: $color;
+	}
+}

package/src/modules/position/_absolute.scss

@@ -0,0 +1,9 @@
+@use 'set-position' as set;
+
+@mixin position($top: 0, $right: 0, $bottom: 0, $left: 0) {
+	@include set.set-position(absolute, $top, $right, $bottom, $left);
+}
+
+@mixin position-unset($top: unset, $right: unset, $bottom: unset, $left: unset) {
+	@include set.set-position(absolute, $top, $right, $bottom, $left);
+}

package/src/modules/position/_fixed.scss

@@ -0,0 +1,9 @@
+@use 'set-position' as set;
+
+@mixin position($top: 0, $right: 0, $bottom: 0, $left: 0) {
+	@include set.set-position(fixed, $top, $right, $bottom, $left);
+}
+
+@mixin position-unset($top: unset, $right: unset, $bottom: unset, $left: unset) {
+	@include set.set-position(fixed, $top, $right, $bottom, $left);
+}

package/src/modules/position/_index.scss

@@ -0,0 +1,3 @@
+@use 'set-position';
+@use 'absolute';
+@use 'fixed';