Skip to content

Commit b439bd4

Browse files
dangmarmdangmarm
committed
Merge with master
1 parent 6bea2a6 commit b439bd4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+3506
-146
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@genexus/chameleon-controls-library",
3-
"version": "6.0.0-next.9",
3+
"version": "6.0.0-next.12",
44
"description": "chameleon - A library of white-label, highly-customizable and reusable web components",
55
"main": "dist/index.cjs.js",
66
"module": "dist/index.js",

‎src/common/_icons.scss‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,90 @@
11
$expandable-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none"><path d="M16.5 5L8.7 12.7L1 5" stroke="%23000" stroke-width="1.2" stroke-linecap="round"/></svg>');
2+
3+
$unpin-outlined: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.8 7.36V5.6H9V4H17V5.6H16.2V12L17.8 13.6V15.2H17.64L14.6 12.16V5.6H11.4V8.96L9.8 7.36ZM19.4 18.96L18.36 20L13.64 15.28V20H12.36V15.2H8.2V13.6L9.8 12V11.44L5 6.64L6.04 5.6L19.4 18.96ZM10.44 13.6H11.88L11.16 12.88L10.44 13.6Z"/></svg>');
4+
$pin-outlined: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 12V5.6H15.8V4H7.8V5.6H8.6V12L7 13.6V15.2H11.16V20H12.44V15.2H16.6V13.6L15 12ZM9.24 13.6L10.2 12.64V5.6H13.4V12.64L14.36 13.6H9.24Z"/></svg>');
5+
6+
$remove: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.18998 8.81H16.79V18C16.7927 18.3969 16.6369 18.7785 16.3571 19.0601C16.0774 19.3417 15.6969 19.5 15.3 19.5H8.68001C8.2831 19.5 7.90259 19.3417 7.62287 19.0601C7.34315 18.7785 7.18735 18.3969 7.18998 18V8.81ZM15.31 5.89V5.73C15.3045 5.08221 14.7778 4.56 14.13 4.56H9.85001C9.2022 4.56 8.6755 5.08221 8.67001 5.73V5.89H5.51001V7.39H18.51V5.89H15.31Z"/></svg>');
7+
$edit: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.58 14.38L9.58 18.38L4.77 19.23L5.58 14.38ZM13.31 6.66L17.3 10.65L10.64 17.32L6.64 13.32L13.31 6.66ZM15.95 4.64302C16.3442 4.64302 16.7222 4.80031 17 5.08L18.84 6.94C19.3861 7.51811 19.3861 8.42189 18.84 9L18.39 9.6L14.39 5.6L14.9 5.08C15.1778 4.80031 15.5558 4.64302 15.95 4.64302Z"/></svg>');
8+
9+
// - - - - - - - - - - - - - - - -
10+
// Images
11+
// - - - - - - - - - - - - - - - -
12+
/// @param {String} $start-image-path-custom-var [""] -
13+
/// @param {String} $end-image-path-custom-var [""] -
14+
/// @param {String} $image-size-custom-var [""] -
15+
/// @param {String} $background-image-size-custom-var [""] -
16+
@mixin images-with-pseudo-elements(
17+
$start-image-path-custom-var: "",
18+
$end-image-path-custom-var: "",
19+
$image-size-custom-var: "",
20+
$background-image-size-custom-var: ""
21+
) {
22+
.pseudo-img--start::before,
23+
.pseudo-img--end::after,
24+
.img {
25+
display: inline-block;
26+
inline-size: #{$image-size-custom-var};
27+
block-size: #{$image-size-custom-var};
28+
content-visibility: auto;
29+
contain-intrinsic-size: auto #{$image-size-custom-var};
30+
}
31+
32+
.pseudo-img--start::before,
33+
.img--start {
34+
grid-area: start-img;
35+
--ch-img: #{$start-image-path-custom-var};
36+
}
37+
38+
.pseudo-img--end::after,
39+
.img--end {
40+
grid-area: end-img;
41+
--ch-img: #{$end-image-path-custom-var};
42+
}
43+
44+
// Background
45+
.start-img-type--background::before,
46+
.end-img-type--background::after {
47+
content: "";
48+
background: no-repeat center / #{$background-image-size-custom-var} var(--ch-img);
49+
}
50+
51+
// Mask
52+
.start-img-type--mask::before,
53+
.end-img-type--mask::after {
54+
content: "";
55+
-webkit-mask: no-repeat center / #{$background-image-size-custom-var} var(--ch-img);
56+
background-color: currentColor;
57+
}
58+
}
59+
60+
// - - - - - - - - - - - - - - - -
61+
// Images
62+
// - - - - - - - - - - - - - - - -
63+
/// @param {String} $image-path-custom-var [""] -
64+
/// @param {String} $image-size-custom-var [""] -
65+
/// @param {String} $background-image-size-custom-var [""] -
66+
@mixin images-without-pseudo-elements(
67+
$image-path-custom-var: "",
68+
$end-image-path-custom-var: "",
69+
$image-size-custom-var: "",
70+
$background-image-size-custom-var: ""
71+
) {
72+
.img {
73+
display: inline-block;
74+
inline-size: #{$image-size-custom-var};
75+
block-size: #{$image-size-custom-var};
76+
content-visibility: auto;
77+
contain-intrinsic-size: auto #{$image-size-custom-var};
78+
}
79+
80+
// Background
81+
.img-type--background {
82+
background: no-repeat center / #{$background-image-size-custom-var} #{$image-path-custom-var};
83+
}
84+
85+
// Mask
86+
.img-type--mask {
87+
-webkit-mask: no-repeat center / #{$background-image-size-custom-var} #{$image-path-custom-var};
88+
background-color: currentColor;
89+
}
90+
}

‎src/common/renders.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { h } from "@stencil/core";
2+
import { ImageRender } from "./types";
3+
4+
export const renderImg = (
5+
cssClass: string,
6+
parts: string,
7+
src: string,
8+
imageType: ImageRender
9+
) =>
10+
imageType === "img" &&
11+
src && (
12+
<img
13+
aria-hidden="true"
14+
class={cssClass}
15+
part={parts}
16+
alt=""
17+
src={src}
18+
loading="lazy"
19+
/>
20+
);

‎src/common/reserverd-names.ts‎ renamed to ‎src/common/reserved-names.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ImageRender } from "./types";
2+
13
const joinParts = (parts: { [key in string]: string }) =>
24
[...Object.values(parts)].join(",");
35

@@ -19,6 +21,35 @@ export const KEY_CODES = {
1921

2022
export const DISABLED_CLASS = "ch-disabled";
2123

24+
// - - - - - - - - - - - - - - - - - - - -
25+
// Images
26+
// - - - - - - - - - - - - - - - - - - - -
27+
const START_IMAGE = "pseudo-img--start";
28+
const END_IMAGE = "pseudo-img--end";
29+
const BACKGROUND_IMAGE_TYPE: ImageRender = "background";
30+
const MASK_IMAGE_TYPE: ImageRender = "mask";
31+
32+
const START_IMAGE_TYPE_PREFIX = "start-img-type--";
33+
const END_IMAGE_TYPE_PREFIX = "end-img-type--";
34+
35+
// For classes
36+
export const startPseudoImageTypeDictionary = {
37+
background: `${START_IMAGE_TYPE_PREFIX}${BACKGROUND_IMAGE_TYPE} ${START_IMAGE}`,
38+
mask: `${START_IMAGE_TYPE_PREFIX}${MASK_IMAGE_TYPE} ${START_IMAGE}`
39+
} as const satisfies { [key in Exclude<ImageRender, "img">]: string };
40+
41+
// For classes
42+
export const endPseudoImageTypeDictionary = {
43+
background: `${END_IMAGE_TYPE_PREFIX}${BACKGROUND_IMAGE_TYPE} ${END_IMAGE}`,
44+
mask: `${END_IMAGE_TYPE_PREFIX}${MASK_IMAGE_TYPE} ${END_IMAGE}`
45+
} as const satisfies { [key in Exclude<ImageRender, "img">]: string };
46+
47+
// For classes
48+
export const imageTypeDictionary = {
49+
background: `img img-type--${BACKGROUND_IMAGE_TYPE}`,
50+
mask: `img img-type--${MASK_IMAGE_TYPE}`
51+
} as const satisfies { [key in Exclude<ImageRender, "img">]: string };
52+
2253
// - - - - - - - - - - - - - - - - - - - -
2354
// Line clamp
2455
// - - - - - - - - - - - - - - - - - - - -

0 commit comments

Comments
 (0)