@educarehq/solaris-ui 0.8.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,
|
|
@@ -13001,6 +13157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13001
13157
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], overflowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowPosition", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], previous: [{ type: i0.Output, args: ["previous"] }], next: [{ type: i0.Output, args: ["next"] }] } });
|
|
13002
13158
|
|
|
13003
13159
|
class SolarisDividerComponent {
|
|
13160
|
+
translateService = inject(SolarisTranslateService);
|
|
13004
13161
|
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
13005
13162
|
appearance = input('subtle', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
13006
13163
|
spacing = input('md', ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
|
|
@@ -13008,26 +13165,49 @@ class SolarisDividerComponent {
|
|
|
13008
13165
|
decorative = input(true, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
|
|
13009
13166
|
width = input('', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
13010
13167
|
height = input('', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
13168
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
13169
|
+
labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
13170
|
+
textPosition = input('center', ...(ngDevMode ? [{ debugName: "textPosition" }] : /* istanbul ignore next */ []));
|
|
13171
|
+
labelText = computed(() => {
|
|
13172
|
+
const direct = this.label();
|
|
13173
|
+
if (direct)
|
|
13174
|
+
return direct;
|
|
13175
|
+
const key = this.labelKey();
|
|
13176
|
+
if (key) {
|
|
13177
|
+
const translated = this.translateService.translate(key);
|
|
13178
|
+
if (translated !== key)
|
|
13179
|
+
return translated;
|
|
13180
|
+
}
|
|
13181
|
+
return null;
|
|
13182
|
+
}, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
13183
|
+
effectiveDecorative = computed(() => {
|
|
13184
|
+
return this.decorative() && !this.labelText();
|
|
13185
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveDecorative" }] : /* istanbul ignore next */ []));
|
|
13011
13186
|
computedRole = computed(() => {
|
|
13012
|
-
return this.
|
|
13187
|
+
return this.effectiveDecorative() ? null : 'separator';
|
|
13013
13188
|
}, ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
|
|
13014
13189
|
computedAriaOrientation = computed(() => {
|
|
13015
|
-
if (this.
|
|
13190
|
+
if (this.effectiveDecorative())
|
|
13016
13191
|
return null;
|
|
13017
13192
|
if (this.orientation() === 'vertical')
|
|
13018
13193
|
return 'vertical';
|
|
13019
13194
|
return null;
|
|
13020
13195
|
}, ...(ngDevMode ? [{ debugName: "computedAriaOrientation" }] : /* istanbul ignore next */ []));
|
|
13196
|
+
computedTextPosition = computed(() => {
|
|
13197
|
+
if (!this.labelText())
|
|
13198
|
+
return null;
|
|
13199
|
+
return this.textPosition();
|
|
13200
|
+
}, ...(ngDevMode ? [{ debugName: "computedTextPosition" }] : /* istanbul ignore next */ []));
|
|
13021
13201
|
computedWidth = computed(() => {
|
|
13022
13202
|
const w = this.width();
|
|
13023
|
-
return w
|
|
13203
|
+
return w || null;
|
|
13024
13204
|
}, ...(ngDevMode ? [{ debugName: "computedWidth" }] : /* istanbul ignore next */ []));
|
|
13025
13205
|
computedHeight = computed(() => {
|
|
13026
13206
|
const h = this.height();
|
|
13027
|
-
return h
|
|
13207
|
+
return h || null;
|
|
13028
13208
|
}, ...(ngDevMode ? [{ debugName: "computedHeight" }] : /* istanbul ignore next */ []));
|
|
13029
13209
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13030
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
13210
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDividerComponent, isStandalone: true, selector: "solaris-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-inset": "inset()", "attr.role": "computedRole()", "attr.data-spacing": "spacing()", "attr.data-appearance": "appearance()", "attr.data-orientation": "orientation()", "attr.data-text-position": "computedTextPosition()", "attr.aria-hidden": "effectiveDecorative() ? \"true\" : null", "attr.aria-orientation": "computedAriaOrientation()", "style.--solaris-divider-width": "computedWidth()", "style.--solaris-divider-height": "computedHeight()" } }, ngImport: i0, template: "<span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n@if (labelText(); as text) {\n <span class=\"solaris-divider__text\">{{ text }}</span>\n <span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n}\n", styles: [":host{--solaris-divider-width: 100%;--solaris-divider-height: 100%;--solaris-divider-spacing-none: 0;--solaris-divider-inset-end: var(--solaris-spacing-3);--solaris-divider-spacing-sm: var(--solaris-spacing-2);--solaris-divider-spacing-md: var(--solaris-spacing-3);--solaris-divider-spacing-lg: var(--solaris-spacing-5);--solaris-divider-inset-start: var(--solaris-spacing-3);--solaris-divider-text-gap: var(--solaris-spacing-3);--solaris-divider-text-color: var(--solaris-text-muted);--solaris-divider-text-font-size: var(--solaris-font-size-sm);display:block;pointer-events:none;box-sizing:border-box}:host([data-orientation=horizontal]){display:flex;align-items:center;width:var(--solaris-divider-width);margin-block:var(--solaris-divider-spacing-md)}:host([data-orientation=vertical]){width:0;height:var(--solaris-divider-height);min-height:16px;align-self:stretch;margin-inline:var(--solaris-divider-spacing-md);border-left:var(--solaris-border-width-sm) solid var(--solaris-border-default)}.solaris-divider__line{flex:1 1 0;min-width:0;border-top:var(--solaris-border-width-sm) solid var(--solaris-border-default)}:host([data-orientation=vertical]) .solaris-divider__line{display:none}.solaris-divider__text{flex:0 0 auto;max-width:100%;white-space:nowrap;color:var(--solaris-divider-text-color);font-size:var(--solaris-divider-text-font-size);margin-inline:var(--solaris-divider-text-gap)}:host([data-text-position=start]) .solaris-divider__line:first-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-text-position=end]) .solaris-divider__line:last-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-spacing=none][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-lg)}:host([data-spacing=none][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-lg)}:host([data-appearance=strong]) .solaris-divider__line{border-top-color:var(--solaris-border-strong);border-top-width:var(--solaris-border-width-lg)}:host([data-appearance=strong][data-orientation=vertical]){border-left-color:var(--solaris-border-strong);border-left-width:var(--solaris-border-width-lg)}:host([data-inset=start][data-orientation=horizontal]){width:calc(100% - var(--solaris-divider-inset-start));margin-inline-start:var(--solaris-divider-inset-start)}:host([data-inset=end][data-orientation=horizontal]){margin-inline-end:var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=horizontal]){margin-inline:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end))}:host([data-inset=start][data-orientation=vertical]){margin-block-start:var(--solaris-divider-inset-start);height:calc(100% - var(--solaris-divider-inset-start))}:host([data-inset=end][data-orientation=vertical]){margin-block-end:var(--solaris-divider-inset-end);height:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=vertical]){height:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end));margin-block:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13031
13211
|
}
|
|
13032
13212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDividerComponent, decorators: [{
|
|
13033
13213
|
type: Component,
|
|
@@ -13037,12 +13217,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13037
13217
|
'[attr.data-spacing]': 'spacing()',
|
|
13038
13218
|
'[attr.data-appearance]': 'appearance()',
|
|
13039
13219
|
'[attr.data-orientation]': 'orientation()',
|
|
13040
|
-
'[attr.
|
|
13220
|
+
'[attr.data-text-position]': 'computedTextPosition()',
|
|
13221
|
+
'[attr.aria-hidden]': 'effectiveDecorative() ? "true" : null',
|
|
13041
13222
|
'[attr.aria-orientation]': 'computedAriaOrientation()',
|
|
13042
13223
|
'[style.--solaris-divider-width]': 'computedWidth()',
|
|
13043
13224
|
'[style.--solaris-divider-height]': 'computedHeight()',
|
|
13044
|
-
}, template: "<
|
|
13045
|
-
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
13225
|
+
}, template: "<span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n@if (labelText(); as text) {\n <span class=\"solaris-divider__text\">{{ text }}</span>\n <span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n}\n", styles: [":host{--solaris-divider-width: 100%;--solaris-divider-height: 100%;--solaris-divider-spacing-none: 0;--solaris-divider-inset-end: var(--solaris-spacing-3);--solaris-divider-spacing-sm: var(--solaris-spacing-2);--solaris-divider-spacing-md: var(--solaris-spacing-3);--solaris-divider-spacing-lg: var(--solaris-spacing-5);--solaris-divider-inset-start: var(--solaris-spacing-3);--solaris-divider-text-gap: var(--solaris-spacing-3);--solaris-divider-text-color: var(--solaris-text-muted);--solaris-divider-text-font-size: var(--solaris-font-size-sm);display:block;pointer-events:none;box-sizing:border-box}:host([data-orientation=horizontal]){display:flex;align-items:center;width:var(--solaris-divider-width);margin-block:var(--solaris-divider-spacing-md)}:host([data-orientation=vertical]){width:0;height:var(--solaris-divider-height);min-height:16px;align-self:stretch;margin-inline:var(--solaris-divider-spacing-md);border-left:var(--solaris-border-width-sm) solid var(--solaris-border-default)}.solaris-divider__line{flex:1 1 0;min-width:0;border-top:var(--solaris-border-width-sm) solid var(--solaris-border-default)}:host([data-orientation=vertical]) .solaris-divider__line{display:none}.solaris-divider__text{flex:0 0 auto;max-width:100%;white-space:nowrap;color:var(--solaris-divider-text-color);font-size:var(--solaris-divider-text-font-size);margin-inline:var(--solaris-divider-text-gap)}:host([data-text-position=start]) .solaris-divider__line:first-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-text-position=end]) .solaris-divider__line:last-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-spacing=none][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-lg)}:host([data-spacing=none][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-lg)}:host([data-appearance=strong]) .solaris-divider__line{border-top-color:var(--solaris-border-strong);border-top-width:var(--solaris-border-width-lg)}:host([data-appearance=strong][data-orientation=vertical]){border-left-color:var(--solaris-border-strong);border-left-width:var(--solaris-border-width-lg)}:host([data-inset=start][data-orientation=horizontal]){width:calc(100% - var(--solaris-divider-inset-start));margin-inline-start:var(--solaris-divider-inset-start)}:host([data-inset=end][data-orientation=horizontal]){margin-inline-end:var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=horizontal]){margin-inline:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end))}:host([data-inset=start][data-orientation=vertical]){margin-block-start:var(--solaris-divider-inset-start);height:calc(100% - var(--solaris-divider-inset-start))}:host([data-inset=end][data-orientation=vertical]){margin-block-end:var(--solaris-divider-inset-end);height:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=vertical]){height:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end));margin-block:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end)}\n"] }]
|
|
13226
|
+
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], textPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "textPosition", required: false }] }] } });
|
|
13046
13227
|
|
|
13047
13228
|
class SolarisDividerStackComponent {
|
|
13048
13229
|
spacing = input('md', ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
|
|
@@ -13539,7 +13720,7 @@ class SolarisEditableTabsComponent {
|
|
|
13539
13720
|
return undefined;
|
|
13540
13721
|
}
|
|
13541
13722
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13542
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEditableTabsComponent, isStandalone: true, selector: "solaris-editable-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, defaultable: { classPropertyName: "defaultable", publicName: "defaultable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, renameOnBlur: { classPropertyName: "renameOnBlur", publicName: "renameOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minTabs: { classPropertyName: "minTabs", publicName: "minTabs", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, tabContentMap: { classPropertyName: "tabContentMap", publicName: "tabContentMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabRenameRequested: "tabRenameRequested", tabRename: "tabRename", tabRemoveRequested: "tabRemoveRequested", tabRemove: "tabRemove", tabMoveRequested: "tabMoveRequested", tabMove: "tabMove", defaultTabChange: "defaultTabChange", tabAction: "tabAction" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-show-actions": "showActions()" }, classAttribute: "solaris-editable-tabs" }, viewQueries: [{ propertyName: "menuComponents", predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-editable-tabs__wrapper\">\n <solaris-tabs\n [value]=\"$any(value())\"\n (valueChange)=\"onValueChange($event)\"\n [defaultValue]=\"$any(defaultValue())\"\n [orientation]=\"orientation()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [shape]=\"shape()\"\n [activationMode]=\"activationMode()\"\n [contentTransition]=\"contentTransition()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n class=\"solaris-editable-tabs__inner\"\n >\n @for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-tab\n [value]=\"$any(tab.value)\"\n [label]=\"isRenaming(tab) ? undefined : tab.label\"\n [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n [icon]=\"tab.icon\"\n [badge]=\"tab.badge\"\n [disabled]=\"tab.disabled ?? false\"\n [attr.data-editable]=\"editable() ? '' : null\"\n [attr.data-has-icon]=\"tab.icon ? '' : null\"\n [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n >\n @if (isRenaming(tab)) {\n <span class=\"solaris-editable-tabs__rename-wrapper\">\n <input\n #renameInput\n class=\"solaris-editable-tabs__rename-input\"\n [value]=\"renameValue()\"\n (input)=\"renameValue.set($any($event).target.value)\"\n (keydown)=\"onRenameKeydown($event, tab)\"\n (blur)=\"onRenameBlur(tab)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.confirmRename') ??\n 'Confirm rename'\n \"\n />\n </span>\n } @else if (hasActions(tab)) {\n <span\n class=\"solaris-editable-tabs__action-area\"\n [class.solaris-editable-tabs__action-area--visible]=\"\n showActions() === 'always'\n \"\n [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n !!tab.icon\n \"\n >\n <button\n class=\"solaris-editable-tabs__action-trigger\"\n solaris-dropdown-menu-trigger\n [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n [solarisDropdownMenuPlacement]=\"'bottom'\"\n [solarisDropdownMenuAlign]=\"'start'\"\n [solarisDropdownMenuOffset]=\"4\"\n [solarisDropdownMenuRestoreFocus]=\"true\"\n [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n (menuOpened)=\"activeMenuIndex.set(i)\"\n (menuClosed)=\"activeMenuIndex.set(null)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n \"\n tabindex=\"0\"\n type=\"button\"\n >\n <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n </button>\n </span>\n }\n </solaris-tab>\n }\n\n @for (tab of tabs(); track tab.value) {\n <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n @if (getContentTemplate(tab); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" />\n }\n </solaris-tab-panel>\n }\n </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-dropdown-menu>\n @if (canRename(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n icon=\"edit\"\n (itemSelected)=\"startRename(tab)\"\n />\n }\n @if (canSetDefault(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"\n resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n \"\n icon=\"check\"\n (itemSelected)=\"setAsDefault(tab)\"\n />\n }\n @if (canMoveLeft(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('left')\"\n [icon]=\"moveIcon('left')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n \"\n />\n }\n @if (canMoveRight(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('right')\"\n [icon]=\"moveIcon('right')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n \"\n />\n }\n @if (tab.customActions?.length) {\n @for (action of tab.customActions; track action.id) {\n @if (!action.disabled) {\n <solaris-dropdown-menu-item\n [label]=\"action.label ?? ''\"\n [labelKey]=\"action.labelKey\"\n [icon]=\"action.icon\"\n [color]=\"action.color ?? 'neutral'\"\n (itemSelected)=\"handleCustomAction(tab, action)\"\n />\n }\n }\n }\n @if (canRemove(tab)) {\n <solaris-divider />\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n icon=\"x\"\n color=\"danger\"\n (itemSelected)=\"confirmRemove(tab, i)\"\n />\n }\n </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-primary-base-alpha: #4282fb4d;--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisTabsComponent, selector: "solaris-tabs", inputs: ["value", "defaultValue", "orientation", "appearance", "density", "shape", "activationMode", "contentTransition", "fullWidth", "fitContent", "scrollable", "showIndicator", "disabled", "ariaLabel", "ariaLabelKey"], outputs: ["valueChange", "tabChange", "tabClick"] }, { kind: "component", type: SolarisTabComponent, selector: "solaris-tab", inputs: ["disabled", "value", "iconDecorative", "icon", "label", "labelKey", "ariaLabel", "badgeLabel", "ariaLabelKey", "badgeLabelKey", "badge"] }, { kind: "component", type: SolarisTabPanelComponent, selector: "solaris-tab-panel", inputs: ["value", "lazy"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }, { kind: "component", type: SolarisDividerComponent, selector: "solaris-divider", inputs: ["orientation", "appearance", "spacing", "inset", "decorative", "width", "height"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13723
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEditableTabsComponent, isStandalone: true, selector: "solaris-editable-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, defaultable: { classPropertyName: "defaultable", publicName: "defaultable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, renameOnBlur: { classPropertyName: "renameOnBlur", publicName: "renameOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minTabs: { classPropertyName: "minTabs", publicName: "minTabs", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, tabContentMap: { classPropertyName: "tabContentMap", publicName: "tabContentMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabRenameRequested: "tabRenameRequested", tabRename: "tabRename", tabRemoveRequested: "tabRemoveRequested", tabRemove: "tabRemove", tabMoveRequested: "tabMoveRequested", tabMove: "tabMove", defaultTabChange: "defaultTabChange", tabAction: "tabAction" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-show-actions": "showActions()" }, classAttribute: "solaris-editable-tabs" }, viewQueries: [{ propertyName: "menuComponents", predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-editable-tabs__wrapper\">\n <solaris-tabs\n [value]=\"$any(value())\"\n (valueChange)=\"onValueChange($event)\"\n [defaultValue]=\"$any(defaultValue())\"\n [orientation]=\"orientation()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [shape]=\"shape()\"\n [activationMode]=\"activationMode()\"\n [contentTransition]=\"contentTransition()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n class=\"solaris-editable-tabs__inner\"\n >\n @for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-tab\n [value]=\"$any(tab.value)\"\n [label]=\"isRenaming(tab) ? undefined : tab.label\"\n [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n [icon]=\"tab.icon\"\n [badge]=\"tab.badge\"\n [disabled]=\"tab.disabled ?? false\"\n [attr.data-editable]=\"editable() ? '' : null\"\n [attr.data-has-icon]=\"tab.icon ? '' : null\"\n [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n >\n @if (isRenaming(tab)) {\n <span class=\"solaris-editable-tabs__rename-wrapper\">\n <input\n #renameInput\n class=\"solaris-editable-tabs__rename-input\"\n [value]=\"renameValue()\"\n (input)=\"renameValue.set($any($event).target.value)\"\n (keydown)=\"onRenameKeydown($event, tab)\"\n (blur)=\"onRenameBlur(tab)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.confirmRename') ??\n 'Confirm rename'\n \"\n />\n </span>\n } @else if (hasActions(tab)) {\n <span\n class=\"solaris-editable-tabs__action-area\"\n [class.solaris-editable-tabs__action-area--visible]=\"\n showActions() === 'always'\n \"\n [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n !!tab.icon\n \"\n >\n <button\n class=\"solaris-editable-tabs__action-trigger\"\n solaris-dropdown-menu-trigger\n [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n [solarisDropdownMenuPlacement]=\"'bottom'\"\n [solarisDropdownMenuAlign]=\"'start'\"\n [solarisDropdownMenuOffset]=\"4\"\n [solarisDropdownMenuRestoreFocus]=\"true\"\n [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n (menuOpened)=\"activeMenuIndex.set(i)\"\n (menuClosed)=\"activeMenuIndex.set(null)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n \"\n tabindex=\"0\"\n type=\"button\"\n >\n <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n </button>\n </span>\n }\n </solaris-tab>\n }\n\n @for (tab of tabs(); track tab.value) {\n <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n @if (getContentTemplate(tab); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" />\n }\n </solaris-tab-panel>\n }\n </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-dropdown-menu>\n @if (canRename(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n icon=\"edit\"\n (itemSelected)=\"startRename(tab)\"\n />\n }\n @if (canSetDefault(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"\n resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n \"\n icon=\"check\"\n (itemSelected)=\"setAsDefault(tab)\"\n />\n }\n @if (canMoveLeft(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('left')\"\n [icon]=\"moveIcon('left')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n \"\n />\n }\n @if (canMoveRight(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('right')\"\n [icon]=\"moveIcon('right')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n \"\n />\n }\n @if (tab.customActions?.length) {\n @for (action of tab.customActions; track action.id) {\n @if (!action.disabled) {\n <solaris-dropdown-menu-item\n [label]=\"action.label ?? ''\"\n [labelKey]=\"action.labelKey\"\n [icon]=\"action.icon\"\n [color]=\"action.color ?? 'neutral'\"\n (itemSelected)=\"handleCustomAction(tab, action)\"\n />\n }\n }\n }\n @if (canRemove(tab)) {\n <solaris-divider />\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n icon=\"x\"\n color=\"danger\"\n (itemSelected)=\"confirmRemove(tab, i)\"\n />\n }\n </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-primary-base-alpha: #4282fb4d;--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisTabsComponent, selector: "solaris-tabs", inputs: ["value", "defaultValue", "orientation", "appearance", "density", "shape", "activationMode", "contentTransition", "fullWidth", "fitContent", "scrollable", "showIndicator", "disabled", "ariaLabel", "ariaLabelKey"], outputs: ["valueChange", "tabChange", "tabClick"] }, { kind: "component", type: SolarisTabComponent, selector: "solaris-tab", inputs: ["disabled", "value", "iconDecorative", "icon", "label", "labelKey", "ariaLabel", "badgeLabel", "ariaLabelKey", "badgeLabelKey", "badge"] }, { kind: "component", type: SolarisTabPanelComponent, selector: "solaris-tab-panel", inputs: ["value", "lazy"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }, { kind: "component", type: SolarisDividerComponent, selector: "solaris-divider", inputs: ["orientation", "appearance", "spacing", "inset", "decorative", "width", "height", "label", "labelKey", "textPosition"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13543
13724
|
}
|
|
13544
13725
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, decorators: [{
|
|
13545
13726
|
type: Component,
|