Merge pull request #41 from angular-package/develop

v0.19.0-beta

Author: angularpackage

CHANGELOG.md

@@ -1,5 +1,41 @@
 # @angular-package/sass changelog
 
+### v0.19.0-beta [#](https://github.com/angular-package/sass/releases/tag/v0.19.0-beta)
+
+- **Update** [`variant.property-set()`](https://github.com/angular-package/sass/blob/develop/variant/property/_property.set.function.scss) function to handle multiple properties. [8081d34]
+- **Update** [`variant.transform()`](https://github.com/angular-package/sass/blob/develop/variant/_variant.transform.mixin.scss) to handle multiple properties. [305e6c1]
+- **Update** [`schema.has-multiple-colors()`](https://github.com/angular-package/sass/blob/develop/color/palette/schema/_schema.has-multiple-colors.function.scss) function - add `$result` argument to return `bool` or `index` of found indicator. [eca4b74]
+- **Add** [`color.name-indicator-remove()`](https://github.com/angular-package/sass/blob/develop/color/name/indicator/_indicator.remove.function.scss) function to remove indicator or multiple indicators from color name..[ce0cdc4]
+- **Add** [`color.name-indicator-retrieve()`](https://github.com/angular-package/sass/blob/develop/color/name/indicator/_indicator.retrieve.function.scss) function to retrieve indicator or multiple indicators from color name. [b5679c6]
+- **Update** [`color.palette-create()`](https://github.com/angular-package/sass/blob/develop/color/palette/_palette.create.function.scss) function - remove property indicator `':'` and assign property to color. [d853f93]
+- **Update** [`variant.create()`](https://github.com/angular-package/sass/blob/develop/variant/_variant.create.function.scss) function to retrieve color, and use `no-property-name` among with `name` in `$type` equal to `color`. [5bfe892]
+- **Add** [`variant.property-multiple-is()`](https://github.com/angular-package/sass/blob/develop/variant/property/_property.multiple-is.function.scss) function to check whether `$value` is multiple properties. [e97555c]
+- **Add** [`variant.property-multiple()`](https://github.com/angular-package/sass/blob/develop/variant/property/_property.multiple.function.scss) function to handle multiple properties in variant. [dc7f92c]
+- **Fix** [`color.name-replace()`](https://github.com/angular-package/sass/blob/develop/color/name/_name.replace.function.scss) function - change variable `$update` to `$replace`, set argument `$type` to `null` by default, use directly `adjustment.has()`. [5e7068e]
+- **Update** [`color.variant-create()`](https://github.com/angular-package/sass/blob/develop/color/variant/_variant.create.mixin.scss) function - remove color indicator from class and property, and handle multiple properties. [fda9204]
+- **Update** [`name.retrieve()`](https://github.com/angular-package/sass/blob/develop/color/name/_name.retrieve.function.scss) function - add  `input-name`, `property`, `property-name`, `no-property-name` properties - retrieve property from name. [534249e]
+- **Update** [`property.name()`](https://github.com/angular-package/sass/blob/develop/property/_property.name.function.scss) function - remove duplicates from name. [7eb5e2e]
+- **Update** add to [`list.remove-duplicate()`](https://github.com/angular-package/sass/blob/develop/list/remove/_remove.duplicate.function.scss) function `$remove` arbitrary argument to define what duplicate remove. [3fab0a7]
+- **Update** move [`modifier-retrieve()`](https://github.com/angular-package/sass/blob/develop/variant/modifier/_modifier.retrieve.function.scss) function to module [`modifier`](https://github.com/angular-package/sass/tree/develop/variant/modifier). [15b13f1]
+- **Fix** forward main index. [eb1b424]
+
+[8081d34]: https://github.com/angular-package/sass/commit/8081d3444ddb73aff2f79055e97884b39c7be4eb
+[305e6c1]: https://github.com/angular-package/sass/commit/305e6c1d06dfaf0152fa0976ace215dff8828337
+[eca4b74]: https://github.com/angular-package/sass/commit/eca4b7488eafe9d7e4f72ec7bf914a5bc83d7e5d
+[ce0cdc4]: https://github.com/angular-package/sass/commit/ce0cdc4ca1397c800b8e372e99fd3a31ea506a10
+[b5679c6]: https://github.com/angular-package/sass/commit/b5679c6924547decd094f9a24c66d57540daa6ff
+[d853f93]: https://github.com/angular-package/sass/commit/d853f939164eb919f5eb32c2b891600078461153
+[5bfe892]: https://github.com/angular-package/sass/commit/5bfe8921086acadc1a77fe752640b19d874046e1
+[e97555c]: https://github.com/angular-package/sass/commit/e97555c6b96a7b53d08cb3b7f1e0faa5868bf741
+[dc7f92c]: https://github.com/angular-package/sass/commit/dc7f92c437d247e86d69844cb637b11dd81bc0b2
+[5e7068e]: https://github.com/angular-package/sass/commit/5e7068ed58df3088b8ff686c71a6e8290bf77c05
+[fda9204]: https://github.com/angular-package/sass/commit/fda92040fc088a2f78b26e44e4b4d39d38317271
+[534249e]: https://github.com/angular-package/sass/commit/534249ecad780d6fa0fd6e85fb4acf310cce4745
+[7eb5e2e]: https://github.com/angular-package/sass/commit/7eb5e2ea49300c778a916f4bc6fa208d496ea063
+[3fab0a7]: https://github.com/angular-package/sass/commit/3fab0a7e552d6da685016f98e67494772d02dd40
+[15b13f1]: https://github.com/angular-package/sass/commit/15b13f13c12bd5a03a375a0af648091e0906be3e
+[eb1b424]: https://github.com/angular-package/sass/commit/eb1b424f717a59480ea47c6593caaf3f4e84bdae
+
 ### v0.18.0-beta [#](https://github.com/angular-package/sass/releases/tag/v0.18.0-beta)
 
 - **Update** `color.palette-create()` handle multiple colors in nested colors and use `variant.create()` function from `palette`. [06544a7]

class/variant/_variant.create.mixin.scss

@@ -1,17 +1,16 @@
 // Modules.
-@use '../../map';
 @use '../../meta';
 
 // Mixins.
 @use '../../class/class.content.mixin';
-@use '../../property/property.set.mixin' as property;
 @use '../../variant/variant.transform.mixin';
 
 // Functions.
+@use '../../map/map.get.function';
 @use '../../selector/selector.class.function';
 
-// Status:
-// The `class.variant-create()` mixin .
+// Status: DONE
+// The `class.variant-create()` mixin.
 // @param `$variant`
 // @param `$combine`
 // @param `$pseudo-class`
@@ -20,7 +19,7 @@
 // @param `$modifier`
 @mixin create(
   $variant,
-  $combine: false false false,
+  $combine: false false false false,
   $pseudo-class: (),
   $dictionary: (),
   $function: meta.get-function(class, false, selector),

class/variant/_variant.create.mixin.spec.scss

@@ -9,7 +9,7 @@
 div {
   @include class.variant-create((
     // FEATURE: Variant 1.
-    outline: 2px solid blue,
+    // outline: 2px solid blue,
     // border top: 1px solid yellow,
     // border: 1px solid red,
     // border top: 1px solid red,
@@ -60,7 +60,7 @@ div {
 
     // (border, outline) top: (color: 1px solid red),
     // ((border, outline) start: ((start, end) color: 1px solid red)),
-    // (border, outline) '+top': ((+color, radius): 1px solid red), // TODO: DONE
+    // (border, outline) '+top': ((+color, radius): 1px solid red), // TODO:
 
     // (basic: border): (top: 1px solid red),
     // (basic: border): ((one: top): 1px solid red),

color/name/_name.create.function.scss

@@ -7,7 +7,9 @@
 
 // Modules.
 @use '../../string';
-@use 'indicator';
+
+// Module functions.
+@use 'indicator/indicator.add.function';
 
 // Status: DONE
 // The `color.name-create()` function creates color name with `color` indicator and `$shade`.

color/name/_name.replace.function.scss

@@ -6,7 +6,7 @@
 @use '../../var/var.variables' as variables;
 
 // Modules.
-@use 'adjustment';
+@use 'adjustment/adjustment.has.function';
 
 // Module functions.
 @use 'name.create.function' as *;
@@ -22,14 +22,14 @@
 @function replace(
   $name,
   $replace,
-  $type,
+  $type: null,
   $delimiter: map.get(variables.$var, delimiter),
   $shade: (dark, light),
 ) {
   @return if(
     adjustment.has($name),
-    list.set-nth($name, 1, create($update, $type, $delimiter, $shade)),
-    create($update, $type, $delimiter, $shade)
+    list.set-nth($name, 1, create($replace, $type, $delimiter, $shade)),
+    create($replace, $type, $delimiter, $shade)
   );
 }
 

color/name/_name.retrieve.function.scss

@@ -7,13 +7,21 @@
 @use '../../list/get/get.map.function' as list-get-map;
 @use '../../list/has/has.number.function' as list-has-number;
 @use '../../list/list.first.function' as list-first;
+@use '../../list/list.indexes.function' as list-indexes;
 @use '../../list/list.insert-nth.function' as list-insert-nth;
+@use '../../list/list.nth.function' as list-nth;
 @use '../../list/list.to-map.function' as list-to-map;
 @use '../../list/remove/remove.map.function' as list-remove-map;
+@use '../../list/remove/remove.nth.function' as list-remove-nth;
 @use '../../map/map.pick.function' as map-pick;
+@use '../../map/map.update.function' as map-update;
+@use '../../string/string.replace.function' as string-replace;
+@use '../../string/string.unquote.function' as string-unquote;
 
 // Module functions.
 @use 'adjustment/adjustment.has.function';
+@use 'indicator/indicator.remove.function' as indicator-remove;
+@use 'indicator/indicator.retrieve.function' as indicator-retrieve;
 
 // Status: DONE
 // The `color.name-retrieve()` function returns a map with attributes obtained from `$name`.
@@ -27,6 +35,9 @@
   $result: ();
   $separator: list.separator($name);
 
+  // Input name.
+  $result: map.set($result, input-name, $name);
+
   // Check whether `$name` contains adjustment.
   @if adjustment.has($name) {
     // Get `map` from `$name`.
@@ -59,12 +70,24 @@
       }
 
       // Create map from `$attributes`.
-      $result: map.set(list-to-map.to-map($name, (name: list string), $attributes...), separator, $separator);
+      $result: map.merge($result, list-to-map.to-map($name, (name: list string), $attributes...));
+      $result: map.set($result, separator, $separator);
     }
-
-  // No adjustments.
   } @else {
-    $result: (name: $name, separator: $separator);
+    // No adjustments.
+    $result: map.merge($result, (name: $name, separator: $separator));
+  }
+
+  // Name has property.
+  $property-index: list-indexes.indexes(map.get($result, name), all, '~=', ':');
+  @if $property-index {
+    $property: string-unquote.unquote(string-replace.replace(indicator-retrieve.retrieve(map.get($result, name), ':'), 'first', ':', ''));
+    $no-property-name: indicator-remove.remove(map.get($result, name), ':');
+    $result: map-update.update($result, (
+      property: $property,
+      property-name: ($property: indicator-remove.remove(map.get($result, input-name), ':')),
+      no-property-name: $no-property-name,
+    ));
   }
 
   // If `$model` is set to name set retrieved adjustment to key of color name.
@@ -120,3 +143,8 @@
 
 // `$model`
 // @debug retrieve((primary dark, '*' 5%, '-' 0.2), $model: name); // (primary dark: (lightness: "*" 5%, alpha: "-" 0.2, separator: comma))
+
+// Retrieve color property.
+// @debug retrieve(primary dark ':color');
+// @debug retrieve((primary dark ':color', 5%));
+// @debug retrieve((primary dark ':color') 5%);

color/name/indicator/_index.scss

@@ -1,2 +1,4 @@
 @forward 'indicator.add-multiple.function';
 @forward 'indicator.add.function';
+@forward 'indicator.remove.function';
+@forward 'indicator.retrieve.function';

color/name/indicator/_indicator.remove.function.scss

@@ -0,0 +1,37 @@
+// Sass.
+@use 'sass:list';
+@use 'sass:map';
+
+// Functions.
+@use '../../../list/list.indexes.function' as list-indexes;
+@use '../../../list/list.nth.function' as list-nth;
+@use '../../../list/remove/remove.nth.function' as list-remove-nth;
+@use '../adjustment/adjustment.has.function';
+
+// Status: DONE
+// The `color.indicator-remove()` function.
+// @param `$color`
+// @param `$indicator`
+// @arbitrary `$indicators...`
+// @returns
+@function remove($color, $indicator, $indicators...) {
+  @if adjustment.has($color) {
+    $name: list-remove-nth.nth(
+      list-nth.nth($color, 1),
+      list-indexes.indexes(list-nth.nth($color, 1), all, '~=', $indicator, $indicators...)
+    );
+    @return list.set-nth($color, 1, $name);
+  }
+  @return list-remove-nth.nth($color, list-indexes.indexes($color, all, '~=', $indicator, $indicators...)...);
+}
+
+// Examples.
+// @debug remove(primary dark ':background', ':background'); // primary dark
+// @debug remove(primary dark ':color', ':color'); // primary dark
+
+// multiple
+// @debug remove(primary dark ':color', ':color', ':background'); // primary dark
+// @debug remove(primary dark ':color', ':'); // primary dark
+
+// adjustment
+// @debug remove((primary dark ':color', 5%), ':'); // primary dark, 5%

color/name/indicator/_indicator.retrieve.function.scss

@@ -0,0 +1,28 @@
+// Functions.
+@use '../../../list/list.indexes.function' as list-indexes;
+@use '../../../list/list.nth.function' as list-nth;
+@use '../adjustment/adjustment.has.function';
+
+// Status: DONE
+// The `color.indicator-retrieve()` function.
+// @param `$color`
+// @param `$indicator`
+// @arbitrary `$indicators...`
+// @returns
+@function retrieve($color, $indicator, $indicators...) {
+  $color: if(adjustment.has($color), list-nth.nth($color, 1), $color);
+  @return list-nth.nth(
+    $color,
+    list-indexes.indexes($color, all, '~=', $indicator, $indicators...)...
+  );
+}
+
+// Examples.
+// @debug retrieve(primary dark ':background', ':'); // :background
+// @debug retrieve(primary dark ':color', ':'); // :color
+
+// multiple
+// @debug retrieve(primary dark '!test' ':color', ':', '!'); // '":color" "!test"
+
+// adjustment
+// @debug retrieve((primary dark ':color', 5%), ':'); // :color