@educarehq/solaris-ui 0.9.0 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1982,6 +1982,110 @@ const MEDIA_ICONS = [
|
|
|
1982
1982
|
},
|
|
1983
1983
|
];
|
|
1984
1984
|
|
|
1985
|
+
const BRAND_ICONS = [
|
|
1986
|
+
{
|
|
1987
|
+
name: 'google',
|
|
1988
|
+
viewBox: '0 0 16 16',
|
|
1989
|
+
fill: 'none',
|
|
1990
|
+
elements: [
|
|
1991
|
+
{
|
|
1992
|
+
type: 'path',
|
|
1993
|
+
fill: '#4285F4',
|
|
1994
|
+
d: 'M14.9 8.161c0-.476-.039-.954-.121-1.422h-6.64v2.695h3.802a3.24 3.24 0 01-1.407 2.127v1.75h2.269c1.332-1.22 2.097-3.02 2.097-5.15z',
|
|
1995
|
+
},
|
|
1996
|
+
{
|
|
1997
|
+
type: 'path',
|
|
1998
|
+
fill: '#34A853',
|
|
1999
|
+
d: 'M8.14 15c1.898 0 3.499-.62 4.665-1.69l-2.268-1.749c-.631.427-1.446.669-2.395.669-1.836 0-3.393-1.232-3.952-2.888H1.85v1.803A7.044 7.044 0 008.14 15z',
|
|
2000
|
+
},
|
|
2001
|
+
{
|
|
2002
|
+
type: 'path',
|
|
2003
|
+
fill: '#FBBC04',
|
|
2004
|
+
d: 'M4.187 9.342a4.17 4.17 0 010-2.68V4.859H1.849a6.97 6.97 0 000 6.286l2.338-1.803z',
|
|
2005
|
+
},
|
|
2006
|
+
{
|
|
2007
|
+
type: 'path',
|
|
2008
|
+
fill: '#EA4335',
|
|
2009
|
+
d: 'M8.14 3.77a3.837 3.837 0 012.7 1.05l2.01-1.999a6.786 6.786 0 00-4.71-1.82 7.042 7.042 0 00-6.29 3.858L4.186 6.66c.556-1.658 2.116-2.89 3.952-2.89z',
|
|
2010
|
+
},
|
|
2011
|
+
],
|
|
2012
|
+
},
|
|
2013
|
+
{
|
|
2014
|
+
name: 'microsoft',
|
|
2015
|
+
viewBox: '0 0 16 16',
|
|
2016
|
+
fill: 'none',
|
|
2017
|
+
elements: [
|
|
2018
|
+
{ type: 'rect', x: 1, y: 1, width: 6.5, height: 6.5, fill: '#F35325' },
|
|
2019
|
+
{ type: 'rect', x: 8.5, y: 1, width: 6.5, height: 6.5, fill: '#81BC06' },
|
|
2020
|
+
{ type: 'rect', x: 1, y: 8.5, width: 6.5, height: 6.5, fill: '#05A6F0' },
|
|
2021
|
+
{
|
|
2022
|
+
type: 'rect',
|
|
2023
|
+
x: 8.5,
|
|
2024
|
+
y: 8.5,
|
|
2025
|
+
width: 6.5,
|
|
2026
|
+
height: 6.5,
|
|
2027
|
+
fill: '#FFBA08',
|
|
2028
|
+
},
|
|
2029
|
+
],
|
|
2030
|
+
},
|
|
2031
|
+
{
|
|
2032
|
+
name: 'apple',
|
|
2033
|
+
viewBox: '0 0 24 24',
|
|
2034
|
+
fill: 'none',
|
|
2035
|
+
elements: [
|
|
2036
|
+
{
|
|
2037
|
+
type: 'path',
|
|
2038
|
+
fill: 'currentColor',
|
|
2039
|
+
d: 'M14.94,5.19A4.38,4.38,0,0,0,16,2,4.44,4.44,0,0,0,13,3.52,4.17,4.17,0,0,0,12,6.61,3.69,3.69,0,0,0,14.94,5.19Zm2.52,7.44a4.51,4.51,0,0,1,2.16-3.81,4.66,4.66,0,0,0-3.66-2c-1.56-.16-3,.91-3.83.91s-2-.89-3.3-.87A4.92,4.92,0,0,0,4.69,9.39C2.93,12.45,4.24,17,6,19.47,6.8,20.68,7.8,22.05,9.12,22s1.75-.82,3.28-.82,2,.82,3.3.79,2.22-1.24,3.06-2.45a11,11,0,0,0,1.38-2.85A4.41,4.41,0,0,1,17.46,12.63Z',
|
|
2040
|
+
},
|
|
2041
|
+
],
|
|
2042
|
+
},
|
|
2043
|
+
{
|
|
2044
|
+
name: 'android',
|
|
2045
|
+
viewBox: '-22.5 0 301 301',
|
|
2046
|
+
fill: 'none',
|
|
2047
|
+
elements: [
|
|
2048
|
+
{
|
|
2049
|
+
type: 'path',
|
|
2050
|
+
fill: '#FFFFFF',
|
|
2051
|
+
d: 'M78.3890161,0.858476242 C76.9846593,0.871877584 75.5269206,1.21067383 74.1988355,1.94683705 C69.9813154,4.28464966 68.4344792,9.70448752 70.7705059,13.9187887 L80.2936432,31.1148585 C57.3501835,45.3109605 42.146676,69.5583356 42.146676,97.23264 C42.146676,97.3488107 42.1463538,97.5233203 42.146676,97.6951925 C42.1467894,97.7558421 42.1461099,97.7904107 42.146676,97.8584397 C42.1467112,97.9488816 42.146676,98.0809536 42.146676,98.1033235 L42.146676,102.37513 C37.7401995,97.3051619 31.2627337,94.103607 24.0255064,94.103607 C10.766574,94.103607 0,104.870185 0,118.129121 L0,192.137501 C0,205.396437 10.766574,216.163015 24.0255064,216.163015 C31.2627337,216.163015 37.7401995,212.96146 42.146676,207.891492 L42.146676,218.258109 C42.146676,232.234601 53.5833566,243.671281 67.5598484,243.671281 L74.0083724,243.671281 L74.0083724,276.594135 C74.0083724,289.853131 84.774955,300.619649 98.0338856,300.619649 C111.292821,300.619649 122.0594,289.853131 122.0594,276.594135 L122.0594,243.671281 L133.215081,243.671281 L133.215081,276.594135 C133.215081,289.853131 143.981659,300.619649 157.240595,300.619649 C170.499522,300.619649 181.266118,289.853131 181.266118,276.594135 L181.266118,243.671281 L187.714637,243.671281 C201.691129,243.671281 213.127809,232.234601 213.127809,218.258109 L213.127809,207.891492 C217.534299,212.96146 224.011752,216.163015 231.248984,216.163015 C244.507919,216.163015 255.274498,205.396437 255.274498,192.137501 L255.274498,118.129121 C255.274498,104.870185 244.507919,94.103607 231.248984,94.103607 C224.011752,94.103607 217.534299,97.3051619 213.127809,102.37513 L213.127809,98.1849514 L213.127809,98.1033407 C213.128367,97.9723769 213.127955,97.8421262 213.127809,97.8584655 C213.129527,97.5976548 213.127809,97.3898395 213.127809,97.2326572 C213.127809,69.5631979 197.890397,45.339215 174.95363,31.1420821 L184.503985,13.918763 C186.840011,9.70446174 185.293178,4.28462389 181.075655,1.94681128 C179.747565,1.21064805 178.289834,0.871868993 176.885477,0.85845047 C173.770979,0.828641074 170.714038,2.4700306 169.103704,5.37514094 L159.118011,23.4146964 C149.353914,19.811505 138.730068,17.8368515 127.637245,17.8368515 C116.555726,17.8368515 105.912363,19.7912913 96.1564693,23.3874813 L86.1707769,5.37514094 C84.5604527,2.47002201 81.503506,0.828709799 78.3890161,0.85845047 L78.3890161,0.858476242 Z',
|
|
2052
|
+
},
|
|
2053
|
+
{
|
|
2054
|
+
type: 'path',
|
|
2055
|
+
fill: '#A4C639',
|
|
2056
|
+
d: 'M24.0260725,100.361664 C14.1317,100.361664 6.25861893,108.234747 6.25861893,118.129121 L6.25861893,192.137501 C6.25861893,202.031875 14.1317,209.904958 24.0260725,209.904958 C33.9204441,209.904958 41.7935257,202.031875 41.7935257,192.137501 L41.7935257,118.129121 C41.7935257,108.234747 33.9204441,100.361664 24.0260725,100.361664 L24.0260725,100.361664 Z M231.249551,100.361664 C221.355176,100.361664 213.482094,108.234747 213.482094,118.129121 L213.482094,192.137501 C213.482094,202.031875 221.355176,209.904958 231.249551,209.904958 C241.143925,209.904958 249.016999,202.031875 249.016999,192.137501 L249.016999,118.129121 C249.016999,108.234747 241.143925,100.361664 231.249551,100.361664 L231.249551,100.361664 Z',
|
|
2057
|
+
},
|
|
2058
|
+
{
|
|
2059
|
+
type: 'path',
|
|
2060
|
+
fill: '#A4C639',
|
|
2061
|
+
d: 'M98.0338856,184.818075 C88.1395114,184.818075 80.2664341,192.691157 80.2664341,202.585531 L80.2664341,276.593963 C80.2664341,286.488363 88.1395114,294.361308 98.0338856,294.361308 C107.92826,294.361308 115.801342,286.488363 115.801342,276.593963 L115.801342,202.585531 C115.801342,192.691157 107.92826,184.818075 98.0338856,184.818075 L98.0338856,184.818075 Z M157.240595,184.818075 C147.346221,184.818075 139.473138,192.691157 139.473138,202.585531 L139.473138,276.593963 C139.473138,286.488363 147.346221,294.361308 157.240595,294.361308 C167.134969,294.361308 175.008043,286.488363 175.008043,276.593963 L175.008043,202.585531 C175.008043,192.691157 167.134969,184.818075 157.240595,184.818075 L157.240595,184.818075 Z',
|
|
2062
|
+
},
|
|
2063
|
+
{
|
|
2064
|
+
type: 'path',
|
|
2065
|
+
fill: '#A4C639',
|
|
2066
|
+
d: 'M78.4434341,7.11654228 C78.0234231,7.12083758 77.6320498,7.22919946 77.2462398,7.44304537 C75.9792855,8.14533584 75.5626532,9.60121987 76.2667168,10.8713836 L88.782836,33.4820338 C64.7023936,46.0117562 48.4373365,69.8232526 48.4047377,97.1510121 L206.869751,97.1510121 C206.837193,69.8232526 190.572096,46.0117562 166.491645,33.4820338 L179.007777,10.8713836 C179.711837,9.60121987 179.295201,8.14533584 178.02825,7.44304537 C177.642438,7.22919946 177.251067,7.1205455 176.831055,7.11654228 C175.931919,7.10786577 175.079646,7.55712 174.599912,8.42257181 L161.920533,31.2781058 C151.548297,26.6773219 139.914231,24.0949434 127.637245,24.0949434 C115.360249,24.0949434 103.726174,26.6773219 93.3539479,31.2781058 L80.6745686,8.42257181 C80.1948375,7.55712 79.3425576,7.10791732 78.4434341,7.11654228 L78.4434341,7.11654228 Z M48.4047377,103.40907 L48.4047377,218.258109 C48.4047377,228.870039 56.9479173,237.413214 67.5598484,237.413214 L187.714637,237.413214 C198.326576,237.413214 206.869751,228.870039 206.869751,218.258109 L206.869751,103.40907 L48.4047377,103.40907 L48.4047377,103.40907 Z',
|
|
2067
|
+
},
|
|
2068
|
+
{
|
|
2069
|
+
type: 'path',
|
|
2070
|
+
fill: '#FFFFFF',
|
|
2071
|
+
d: 'M91.0681772,54.9226953 C87.4507168,54.9226953 84.4563973,57.9170105 84.4563973,61.5344795 C84.4563973,65.1519399 87.4507168,68.146255 91.0681772,68.146255 C94.6856376,68.146255 97.6799528,65.1519399 97.6799528,61.5344795 C97.6799528,57.9170105 94.6856376,54.9226953 91.0681772,54.9226953 L91.0681772,54.9226953 Z M164.205874,54.9226953 C160.588413,54.9226953 157.59409,57.9170105 157.59409,61.5344795 C157.59409,65.1519399 160.588413,68.146255 164.205874,68.146255 C167.823326,68.146255 170.817649,65.1519399 170.817649,61.5344795 C170.817649,57.9170105 167.823326,54.9226953 164.205874,54.9226953 L164.205874,54.9226953 Z',
|
|
2072
|
+
},
|
|
2073
|
+
],
|
|
2074
|
+
},
|
|
2075
|
+
{
|
|
2076
|
+
name: 'github',
|
|
2077
|
+
viewBox: '0 0 24 24',
|
|
2078
|
+
fill: 'none',
|
|
2079
|
+
elements: [
|
|
2080
|
+
{
|
|
2081
|
+
type: 'path',
|
|
2082
|
+
fill: 'currentColor',
|
|
2083
|
+
d: 'M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z',
|
|
2084
|
+
},
|
|
2085
|
+
],
|
|
2086
|
+
},
|
|
2087
|
+
];
|
|
2088
|
+
|
|
1985
2089
|
const SOLARIS_BUILT_IN_ICONS = [
|
|
1986
2090
|
...NAVIGATION_ICONS,
|
|
1987
2091
|
...ACTIONS_ICONS,
|
|
@@ -1991,6 +2095,7 @@ const SOLARIS_BUILT_IN_ICONS = [
|
|
|
1991
2095
|
...LAYOUT_ICONS,
|
|
1992
2096
|
...COMMUNICATION_ICONS,
|
|
1993
2097
|
...MEDIA_ICONS,
|
|
2098
|
+
...BRAND_ICONS,
|
|
1994
2099
|
];
|
|
1995
2100
|
|
|
1996
2101
|
class SolarisIconRegistryService {
|
|
@@ -2042,11 +2147,11 @@ class SolarisIconComponent {
|
|
|
2042
2147
|
accessibleLabel = computed(() => this.ariaLabel() ?? '', ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : /* istanbul ignore next */ []));
|
|
2043
2148
|
hasSemanticLabel = computed(() => !this.decorative() && !!this.ariaLabel(), ...(ngDevMode ? [{ debugName: "hasSemanticLabel" }] : /* istanbul ignore next */ []));
|
|
2044
2149
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2045
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisIconComponent, isStandalone: true, selector: "solaris-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (definition(); as icon) {\n <svg\n width=\"100%\"\n height=\"100%\"\n [attr.viewBox]=\"icon.viewBox\"\n [attr.fill]=\"icon.fill ?? 'none'\"\n [attr.stroke]=\"icon.stroke ?? 'currentColor'\"\n [attr.stroke-width]=\"icon.strokeWidth ?? 2\"\n [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n >\n @for (element of icon.elements; track $index) {\n @switch (element.type) {\n @case ('path') {\n <path
|
|
2150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisIconComponent, isStandalone: true, selector: "solaris-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (definition(); as icon) {\n <svg\n width=\"100%\"\n height=\"100%\"\n [attr.viewBox]=\"icon.viewBox\"\n [attr.fill]=\"icon.fill ?? 'none'\"\n [attr.stroke]=\"icon.stroke ?? 'currentColor'\"\n [attr.stroke-width]=\"icon.strokeWidth ?? 2\"\n [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n >\n @for (element of icon.elements; track $index) {\n @switch (element.type) {\n @case ('path') {\n <path\n [attr.d]=\"element.d\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"element.x1\"\n [attr.y1]=\"element.y1\"\n [attr.x2]=\"element.x2\"\n [attr.y2]=\"element.y2\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"element.points\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"element.points\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('circle') {\n <circle\n [attr.cx]=\"element.cx\"\n [attr.cy]=\"element.cy\"\n [attr.r]=\"element.r\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('rect') {\n <rect\n [attr.x]=\"element.x\"\n [attr.y]=\"element.y\"\n [attr.width]=\"element.width\"\n [attr.height]=\"element.height\"\n [attr.rx]=\"element.rx\"\n [attr.ry]=\"element.ry\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n }\n }\n </svg>\n}\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2046
2151
|
}
|
|
2047
2152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisIconComponent, decorators: [{
|
|
2048
2153
|
type: Component,
|
|
2049
|
-
args: [{ selector: 'solaris-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (definition(); as icon) {\n <svg\n width=\"100%\"\n height=\"100%\"\n [attr.viewBox]=\"icon.viewBox\"\n [attr.fill]=\"icon.fill ?? 'none'\"\n [attr.stroke]=\"icon.stroke ?? 'currentColor'\"\n [attr.stroke-width]=\"icon.strokeWidth ?? 2\"\n [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n >\n @for (element of icon.elements; track $index) {\n @switch (element.type) {\n @case ('path') {\n <path
|
|
2154
|
+
args: [{ selector: 'solaris-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (definition(); as icon) {\n <svg\n width=\"100%\"\n height=\"100%\"\n [attr.viewBox]=\"icon.viewBox\"\n [attr.fill]=\"icon.fill ?? 'none'\"\n [attr.stroke]=\"icon.stroke ?? 'currentColor'\"\n [attr.stroke-width]=\"icon.strokeWidth ?? 2\"\n [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n >\n @for (element of icon.elements; track $index) {\n @switch (element.type) {\n @case ('path') {\n <path\n [attr.d]=\"element.d\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"element.x1\"\n [attr.y1]=\"element.y1\"\n [attr.x2]=\"element.x2\"\n [attr.y2]=\"element.y2\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"element.points\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"element.points\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('circle') {\n <circle\n [attr.cx]=\"element.cx\"\n [attr.cy]=\"element.cy\"\n [attr.r]=\"element.r\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('rect') {\n <rect\n [attr.x]=\"element.x\"\n [attr.y]=\"element.y\"\n [attr.width]=\"element.width\"\n [attr.height]=\"element.height\"\n [attr.rx]=\"element.rx\"\n [attr.ry]=\"element.ry\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n }\n }\n </svg>\n}\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"] }]
|
|
2050
2155
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] } });
|
|
2051
2156
|
|
|
2052
2157
|
class SolarisBadgeComponent {
|
|
@@ -2515,7 +2620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2515
2620
|
// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.tagName is the standard Angular API to differentiate <button> vs <a> for correct disabled/type behavior.
|
|
2516
2621
|
// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.getAttribute/setAttribute is the standard Angular approach to handle default button type.
|
|
2517
2622
|
// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.setAttribute required for default <button> type behavior.
|
|
2518
|
-
// SECURITY_EXCEPTION_FILE: createComponent/insertBefore required to render the spinner
|
|
2623
|
+
// SECURITY_EXCEPTION_FILE: createComponent/insertBefore/appendChild required to render the spinner and icon components inside a native button host (directive has no template).
|
|
2519
2624
|
class SolarisButtonDirective {
|
|
2520
2625
|
appearance = input('solid', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
2521
2626
|
color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
@@ -2527,6 +2632,11 @@ class SolarisButtonDirective {
|
|
|
2527
2632
|
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
2528
2633
|
loadingLabelKey = input(...(ngDevMode ? [undefined, { debugName: "loadingLabelKey" }] : /* istanbul ignore next */ []));
|
|
2529
2634
|
loadingLabel = input(...(ngDevMode ? [undefined, { debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
|
|
2635
|
+
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
2636
|
+
iconPosition = input('start', ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
|
|
2637
|
+
computedIconPosition = computed(() => {
|
|
2638
|
+
return this.icon() ? this.iconPosition() : null;
|
|
2639
|
+
}, ...(ngDevMode ? [{ debugName: "computedIconPosition" }] : /* istanbul ignore next */ []));
|
|
2530
2640
|
isEffectivelyDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
|
|
2531
2641
|
themeService = inject(SolarisThemeService);
|
|
2532
2642
|
effectiveDensity = computed(() => {
|
|
@@ -2540,6 +2650,7 @@ class SolarisButtonDirective {
|
|
|
2540
2650
|
platformId = inject(PLATFORM_ID);
|
|
2541
2651
|
destroyRef = inject(DestroyRef);
|
|
2542
2652
|
spinnerRef = null;
|
|
2653
|
+
iconRef = null;
|
|
2543
2654
|
resolvedLoadingLabel = computed(() => {
|
|
2544
2655
|
const label = this.loadingLabel();
|
|
2545
2656
|
if (label) {
|
|
@@ -2569,7 +2680,13 @@ class SolarisButtonDirective {
|
|
|
2569
2680
|
this.detachSpinner();
|
|
2570
2681
|
}
|
|
2571
2682
|
});
|
|
2572
|
-
|
|
2683
|
+
effect(() => {
|
|
2684
|
+
this.syncIcon();
|
|
2685
|
+
});
|
|
2686
|
+
this.destroyRef.onDestroy(() => {
|
|
2687
|
+
this.detachSpinner();
|
|
2688
|
+
this.detachIcon();
|
|
2689
|
+
});
|
|
2573
2690
|
}
|
|
2574
2691
|
attachSpinner() {
|
|
2575
2692
|
if (this.spinnerRef || !isPlatformBrowser(this.platformId)) {
|
|
@@ -2594,6 +2711,44 @@ class SolarisButtonDirective {
|
|
|
2594
2711
|
this.spinnerRef.destroy();
|
|
2595
2712
|
this.spinnerRef = null;
|
|
2596
2713
|
}
|
|
2714
|
+
syncIcon() {
|
|
2715
|
+
const name = this.icon();
|
|
2716
|
+
if (!name || !isPlatformBrowser(this.platformId)) {
|
|
2717
|
+
this.detachIcon();
|
|
2718
|
+
return;
|
|
2719
|
+
}
|
|
2720
|
+
if (this.iconRef) {
|
|
2721
|
+
const el = this.iconRef.location.nativeElement;
|
|
2722
|
+
this.placeIcon(el);
|
|
2723
|
+
return;
|
|
2724
|
+
}
|
|
2725
|
+
const iconRef = createComponent(SolarisIconComponent, {
|
|
2726
|
+
environmentInjector: this.environmentInjector,
|
|
2727
|
+
});
|
|
2728
|
+
iconRef.setInput('name', name);
|
|
2729
|
+
iconRef.setInput('decorative', true);
|
|
2730
|
+
iconRef.changeDetectorRef.detectChanges();
|
|
2731
|
+
const iconEl = iconRef.location.nativeElement;
|
|
2732
|
+
iconEl.classList.add('solaris-button-icon');
|
|
2733
|
+
this.iconRef = iconRef;
|
|
2734
|
+
this.placeIcon(iconEl);
|
|
2735
|
+
}
|
|
2736
|
+
placeIcon(iconEl) {
|
|
2737
|
+
const host = this.elementRef.nativeElement;
|
|
2738
|
+
if (this.iconPosition() === 'end') {
|
|
2739
|
+
host.appendChild(iconEl);
|
|
2740
|
+
}
|
|
2741
|
+
else {
|
|
2742
|
+
host.insertBefore(iconEl, host.firstChild);
|
|
2743
|
+
}
|
|
2744
|
+
}
|
|
2745
|
+
detachIcon() {
|
|
2746
|
+
if (!this.iconRef) {
|
|
2747
|
+
return;
|
|
2748
|
+
}
|
|
2749
|
+
this.iconRef.destroy();
|
|
2750
|
+
this.iconRef = null;
|
|
2751
|
+
}
|
|
2597
2752
|
onClick(event) {
|
|
2598
2753
|
if (this.isEffectivelyDisabled() && this.isAnchor) {
|
|
2599
2754
|
event.preventDefault();
|
|
@@ -2601,7 +2756,7 @@ class SolarisButtonDirective {
|
|
|
2601
2756
|
}
|
|
2602
2757
|
}
|
|
2603
2758
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2604
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SolarisButtonDirective, isStandalone: true, selector: "[solaris-button]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loadingLabelKey: { classPropertyName: "loadingLabelKey", publicName: "loadingLabelKey", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-loading": "loading() ? \"\" : null", "attr.data-full-width": "fullWidth() ? \"\" : null", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-label": "loading() ? resolvedLoadingLabel() : null", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.disabled": "isButton && isEffectivelyDisabled() ? \"\" : null", "tabindex": "isAnchor && isEffectivelyDisabled() ? \"-1\" : null" } }, ngImport: i0 });
|
|
2759
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SolarisButtonDirective, isStandalone: true, selector: "[solaris-button]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loadingLabelKey: { classPropertyName: "loadingLabelKey", publicName: "loadingLabelKey", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-loading": "loading() ? \"\" : null", "attr.data-full-width": "fullWidth() ? \"\" : null", "attr.data-icon-position": "computedIconPosition()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-label": "loading() ? resolvedLoadingLabel() : null", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.disabled": "isButton && isEffectivelyDisabled() ? \"\" : null", "tabindex": "isAnchor && isEffectivelyDisabled() ? \"-1\" : null" } }, ngImport: i0 });
|
|
2605
2760
|
}
|
|
2606
2761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisButtonDirective, decorators: [{
|
|
2607
2762
|
type: Directive,
|
|
@@ -2616,6 +2771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2616
2771
|
'[attr.data-shape]': 'shape()',
|
|
2617
2772
|
'[attr.data-loading]': 'loading() ? "" : null',
|
|
2618
2773
|
'[attr.data-full-width]': 'fullWidth() ? "" : null',
|
|
2774
|
+
'[attr.data-icon-position]': 'computedIconPosition()',
|
|
2619
2775
|
'[attr.aria-busy]': 'loading() ? "true" : null',
|
|
2620
2776
|
'[attr.aria-label]': 'loading() ? resolvedLoadingLabel() : null',
|
|
2621
2777
|
'[attr.aria-disabled]': 'isEffectivelyDisabled() ? "true" : null',
|
|
@@ -2623,7 +2779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2623
2779
|
'[tabindex]': 'isAnchor && isEffectivelyDisabled() ? "-1" : null',
|
|
2624
2780
|
},
|
|
2625
2781
|
}]
|
|
2626
|
-
}], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loadingLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabelKey", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], onClick: [{
|
|
2782
|
+
}], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loadingLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabelKey", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], onClick: [{
|
|
2627
2783
|
type: HostListener,
|
|
2628
2784
|
args: ['click', ['$event']]
|
|
2629
2785
|
}] } });
|
|
@@ -9898,7 +10054,7 @@ class SolarisToastComponent {
|
|
|
9898
10054
|
return key;
|
|
9899
10055
|
}
|
|
9900
10056
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9901
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastComponent, isStandalone: true, selector: "solaris-toast", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "attr.role": "hostRole()", "attr.aria-live": "hostAriaLive()", "attr.data-variant": "hostDataVariant()", "attr.data-icon-size": "hostDataIconSize()", "attr.data-appearance": "hostDataAppearance()", "attr.data-media-shape": "hostDataMediaShape()", "attr.data-actions-align": "hostDataActionsAlign()", "attr.data-center-content": "centerContent()", "attr.data-actions-no-desc": "hasActionsNoDescription()" } }, ngImport: i0, template: "<div class=\"solaris-toast__root\">\n @if (showIcon()) {\n <div class=\"solaris-toast__media\">\n <div class=\"solaris-toast__icon\">\n <solaris-icon\n [name]=\"entry().resolvedIcon\"\n [decorative]=\"entry().options.iconDecorative !== false\"\n />\n </div>\n </div>\n }\n\n <div class=\"solaris-toast__content\">\n @if (showTitle()) {\n <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n }\n\n @if (showDescription()) {\n <div\n class=\"solaris-toast__description\"\n [class.solaris-toast__description--truncated]=\"isTruncated()\"\n [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n >\n {{ entry().resolvedDescription }}\n </div>\n }\n\n @if (showActions()) {\n <div class=\"solaris-toast__actions\">\n @for (action of entry().resolvedActions; track $index) {\n <button\n solaris-button\n [appearance]=\"action.appearance ?? 'ghost'\"\n [color]=\"action.color ?? 'neutral'\"\n size=\"sm\"\n [disabled]=\"action.disabled ?? false\"\n (click)=\"handleActionClick(action)\"\n >\n {{ action.label }}\n </button>\n }\n </div>\n }\n </div>\n\n <div class=\"solaris-toast__trailing\">\n @if (isExpandable()) {\n <button\n type=\"button\"\n class=\"solaris-toast__trailing-btn\"\n [attr.aria-label]=\"expandButtonLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggleExpanded()\"\n >\n <solaris-icon\n class=\"solaris-toast__expand-icon\"\n [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n }\n\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"solaris-toast__trailing-btn\"\n [attr.aria-label]=\"entry().resolvedCloseLabel\"\n (click)=\"handleDismiss()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n\n@if (showProgressBar()) {\n <div\n class=\"solaris-toast__progress\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"progressValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"\n isProcessProgress()\n ? translate('solaris.toast.progress')\n : translate('solaris.toast.remaining')\n \"\n >\n <div\n class=\"solaris-toast__progress-bar\"\n [style.width.%]=\"progressValue()\"\n ></div>\n </div>\n}\n\n@if (showCountdownText()) {\n <div class=\"solaris-toast__countdown-text\">\n <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n <button\n type=\"button\"\n class=\"solaris-toast__countdown-toggle\"\n (click)=\"togglePause()\"\n >\n {{ pauseButtonLabel() }}\n </button>\n </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-width: 800px;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-2);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10057
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastComponent, isStandalone: true, selector: "solaris-toast", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "attr.role": "hostRole()", "attr.aria-live": "hostAriaLive()", "attr.data-variant": "hostDataVariant()", "attr.data-icon-size": "hostDataIconSize()", "attr.data-appearance": "hostDataAppearance()", "attr.data-media-shape": "hostDataMediaShape()", "attr.data-actions-align": "hostDataActionsAlign()", "attr.data-center-content": "centerContent()", "attr.data-actions-no-desc": "hasActionsNoDescription()" } }, ngImport: i0, template: "<div class=\"solaris-toast__root\">\n @if (showIcon()) {\n <div class=\"solaris-toast__media\">\n <div class=\"solaris-toast__icon\">\n <solaris-icon\n [name]=\"entry().resolvedIcon\"\n [decorative]=\"entry().options.iconDecorative !== false\"\n />\n </div>\n </div>\n }\n\n <div class=\"solaris-toast__content\">\n @if (showTitle()) {\n <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n }\n\n @if (showDescription()) {\n <div\n class=\"solaris-toast__description\"\n [class.solaris-toast__description--truncated]=\"isTruncated()\"\n [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n >\n {{ entry().resolvedDescription }}\n </div>\n }\n\n @if (showActions()) {\n <div class=\"solaris-toast__actions\">\n @for (action of entry().resolvedActions; track $index) {\n <button\n solaris-button\n [appearance]=\"action.appearance ?? 'ghost'\"\n [color]=\"action.color ?? 'neutral'\"\n size=\"sm\"\n [disabled]=\"action.disabled ?? false\"\n (click)=\"handleActionClick(action)\"\n >\n {{ action.label }}\n </button>\n }\n </div>\n }\n </div>\n\n <div class=\"solaris-toast__trailing\">\n @if (isExpandable()) {\n <button\n type=\"button\"\n class=\"solaris-toast__trailing-btn\"\n [attr.aria-label]=\"expandButtonLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggleExpanded()\"\n >\n <solaris-icon\n class=\"solaris-toast__expand-icon\"\n [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n }\n\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"solaris-toast__trailing-btn\"\n [attr.aria-label]=\"entry().resolvedCloseLabel\"\n (click)=\"handleDismiss()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n\n@if (showProgressBar()) {\n <div\n class=\"solaris-toast__progress\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"progressValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"\n isProcessProgress()\n ? translate('solaris.toast.progress')\n : translate('solaris.toast.remaining')\n \"\n >\n <div\n class=\"solaris-toast__progress-bar\"\n [style.width.%]=\"progressValue()\"\n ></div>\n </div>\n}\n\n@if (showCountdownText()) {\n <div class=\"solaris-toast__countdown-text\">\n <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n <button\n type=\"button\"\n class=\"solaris-toast__countdown-toggle\"\n (click)=\"togglePause()\"\n >\n {{ pauseButtonLabel() }}\n </button>\n </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-width: 800px;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-2);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9902
10058
|
}
|
|
9903
10059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastComponent, decorators: [{
|
|
9904
10060
|
type: Component,
|
|
@@ -9983,7 +10139,7 @@ class SolarisDialogActionsComponent {
|
|
|
9983
10139
|
this.actionExecuted.emit(action);
|
|
9984
10140
|
}
|
|
9985
10141
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9986
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n @for (action of actions(); track $index) {\n <button\n type=\"button\"\n solaris-button\n (click)=\"handleAction(action)\"\n [color]=\"action.color ?? 'neutral'\"\n [disabled]=\"action.disabled ?? false\"\n [appearance]=\"action.appearance ?? 'solid'\"\n >\n {{ action.label }}\n </button>\n }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-3) var(--solaris-spacing-4)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-2)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n @for (action of actions(); track $index) {\n <button\n type=\"button\"\n solaris-button\n (click)=\"handleAction(action)\"\n [color]=\"action.color ?? 'neutral'\"\n [disabled]=\"action.disabled ?? false\"\n [appearance]=\"action.appearance ?? 'solid'\"\n >\n {{ action.label }}\n </button>\n }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-3) var(--solaris-spacing-4)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-2)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9987
10143
|
}
|
|
9988
10144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogActionsComponent, decorators: [{
|
|
9989
10145
|
type: Component,
|