@area8975/ui 0.1.1-dev.7 → 0.1.1-dev.9
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.
- package/fesm2022/area8975-ui.mjs +228 -9
- package/fesm2022/area8975-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/area8975-ui.d.ts +45 -1
package/fesm2022/area8975-ui.mjs
CHANGED
|
@@ -657,7 +657,10 @@ var UiChartComponent = class UiChartComponent {
|
|
|
657
657
|
});
|
|
658
658
|
effect(() => {
|
|
659
659
|
const chart = this.chart();
|
|
660
|
-
if (chart)
|
|
660
|
+
if (chart) {
|
|
661
|
+
this.applyHidden(chart);
|
|
662
|
+
this.applyEmphasis();
|
|
663
|
+
}
|
|
661
664
|
});
|
|
662
665
|
inject(DestroyRef).onDestroy(() => {
|
|
663
666
|
this.destroyed = true;
|
|
@@ -673,16 +676,18 @@ var UiChartComponent = class UiChartComponent {
|
|
|
673
676
|
}
|
|
674
677
|
}
|
|
675
678
|
applyEmphasis() {
|
|
676
|
-
const emphasis = untracked(this.emphasis);
|
|
677
679
|
const names = this.seriesNames();
|
|
680
|
+
const emphasis = untracked(this.emphasis);
|
|
681
|
+
const active = emphasis && names.includes(emphasis) && !untracked(this.hiddenSeries).includes(emphasis) ? emphasis : null;
|
|
678
682
|
const groups = this.canvas().nativeElement.querySelectorAll(".apexcharts-series[data\\:realIndex]");
|
|
679
683
|
for (const group of groups) {
|
|
680
684
|
const name = names[Number(group.getAttribute("data:realIndex"))];
|
|
681
|
-
group.classList.toggle("ui-chart-series--faded", !!
|
|
685
|
+
group.classList.toggle("ui-chart-series--faded", !!active && name !== active);
|
|
682
686
|
}
|
|
683
687
|
}
|
|
684
688
|
seriesNames() {
|
|
685
|
-
|
|
689
|
+
const { series = [], labels = [] } = untracked(this.options);
|
|
690
|
+
return series.map((item, index) => typeof item === "object" && item !== null && "name" in item ? item.name ?? null : labels[index] ?? null);
|
|
686
691
|
}
|
|
687
692
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
688
693
|
minVersion: "12.0.0",
|
|
@@ -1788,6 +1793,204 @@ const LineChartCurves = [
|
|
|
1788
1793
|
"smooth",
|
|
1789
1794
|
"stepline"
|
|
1790
1795
|
];
|
|
1796
|
+
const percentFormatter = new Intl.NumberFormat("en-GB", {
|
|
1797
|
+
style: "percent",
|
|
1798
|
+
maximumFractionDigits: 1
|
|
1799
|
+
});
|
|
1800
|
+
var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
1801
|
+
variant = input("pie", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
|
|
1802
|
+
totalLabel = input("Total", ...ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []);
|
|
1803
|
+
values = computed(() => this.series()[0]?.data ?? [], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
|
|
1804
|
+
isEmpty = computed(() => !this.values().some((value) => value !== null && value > 0), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
1805
|
+
isMuted = computed(() => {
|
|
1806
|
+
const highlight = this.highlight();
|
|
1807
|
+
return this.categories().map((name) => !!highlight && !highlight.includes(name));
|
|
1808
|
+
}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
|
|
1809
|
+
styles = computed(() => {
|
|
1810
|
+
const highlight = this.highlight();
|
|
1811
|
+
const muted = this.isMuted();
|
|
1812
|
+
return this.categories().map((name, index) => muted[index] ? {
|
|
1813
|
+
colour: CHART_INK.context,
|
|
1814
|
+
dashed: false
|
|
1815
|
+
} : chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false));
|
|
1816
|
+
}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
|
|
1817
|
+
legendItems = computed(() => {
|
|
1818
|
+
const highlight = this.highlight();
|
|
1819
|
+
const items = this.categories().map((name, index) => ({
|
|
1820
|
+
name,
|
|
1821
|
+
...this.styles()[index]
|
|
1822
|
+
})).filter((_, index) => !this.isMuted()[index]);
|
|
1823
|
+
return highlight ? items.sort((a, b) => highlight.indexOf(a.name) - highlight.indexOf(b.name)) : items;
|
|
1824
|
+
}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
|
|
1825
|
+
slices = computed(() => {
|
|
1826
|
+
const hidden = this.hiddenSeries();
|
|
1827
|
+
const values = this.values();
|
|
1828
|
+
const colours = this.colours();
|
|
1829
|
+
return this.categories().map((name, index) => ({
|
|
1830
|
+
name,
|
|
1831
|
+
value: values[index] ?? 0,
|
|
1832
|
+
colour: colours[index]
|
|
1833
|
+
})).filter((slice) => !hidden.includes(slice.name));
|
|
1834
|
+
}, ...ngDevMode ? [{ debugName: "slices" }] : /* istanbul ignore next */ []);
|
|
1835
|
+
chartOptions = computed(() => {
|
|
1836
|
+
const base = baseChartOptions();
|
|
1837
|
+
const slices = this.slices();
|
|
1838
|
+
const donut = this.variant() === "donut";
|
|
1839
|
+
const total = slices.reduce((sum, slice) => sum + slice.value, 0);
|
|
1840
|
+
const centreText = {
|
|
1841
|
+
fontSize: "12px",
|
|
1842
|
+
color: CHART_INK.muted,
|
|
1843
|
+
offsetY: -4
|
|
1844
|
+
};
|
|
1845
|
+
return mergeChartOptions({
|
|
1846
|
+
...base,
|
|
1847
|
+
chart: {
|
|
1848
|
+
...base.chart,
|
|
1849
|
+
type: donut ? "donut" : "pie",
|
|
1850
|
+
height: this.height()
|
|
1851
|
+
},
|
|
1852
|
+
colors: slices.map((slice) => slice.colour),
|
|
1853
|
+
labels: slices.map((slice) => slice.name),
|
|
1854
|
+
series: slices.map((slice) => slice.value),
|
|
1855
|
+
stroke: {
|
|
1856
|
+
show: true,
|
|
1857
|
+
width: 2,
|
|
1858
|
+
colors: [CHART_INK.surface]
|
|
1859
|
+
},
|
|
1860
|
+
states: {
|
|
1861
|
+
...base.states,
|
|
1862
|
+
hover: { filter: { type: "darken" } }
|
|
1863
|
+
},
|
|
1864
|
+
plotOptions: { pie: {
|
|
1865
|
+
expandOnClick: false,
|
|
1866
|
+
donut: {
|
|
1867
|
+
size: "65%",
|
|
1868
|
+
labels: {
|
|
1869
|
+
show: donut,
|
|
1870
|
+
name: centreText,
|
|
1871
|
+
value: {
|
|
1872
|
+
fontSize: "20px",
|
|
1873
|
+
fontWeight: 600,
|
|
1874
|
+
color: CHART_INK.text,
|
|
1875
|
+
offsetY: 4,
|
|
1876
|
+
formatter: (value) => this.formatValue(Number(value))
|
|
1877
|
+
},
|
|
1878
|
+
total: {
|
|
1879
|
+
show: true,
|
|
1880
|
+
showAlways: true,
|
|
1881
|
+
label: this.totalLabel(),
|
|
1882
|
+
...centreText,
|
|
1883
|
+
formatter: () => this.formatValue(total)
|
|
1884
|
+
}
|
|
1885
|
+
}
|
|
1886
|
+
}
|
|
1887
|
+
} },
|
|
1888
|
+
tooltip: {
|
|
1889
|
+
theme: "light",
|
|
1890
|
+
fillSeriesColor: false,
|
|
1891
|
+
custom: ({ seriesIndex }) => {
|
|
1892
|
+
const slice = slices[seriesIndex];
|
|
1893
|
+
return slice ? chartTooltipHtml("", [{
|
|
1894
|
+
colour: slice.colour,
|
|
1895
|
+
name: slice.name,
|
|
1896
|
+
value: this.formatValue(slice.value)
|
|
1897
|
+
}], total ? `${percentFormatter.format(slice.value / total)} of total` : "") : "";
|
|
1898
|
+
}
|
|
1899
|
+
}
|
|
1900
|
+
}, this.options());
|
|
1901
|
+
}, ...ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []);
|
|
1902
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
1903
|
+
minVersion: "12.0.0",
|
|
1904
|
+
version: "22.2.1",
|
|
1905
|
+
ngImport: i0,
|
|
1906
|
+
type: UiPieChartComponent,
|
|
1907
|
+
deps: null,
|
|
1908
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
1909
|
+
});
|
|
1910
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
1911
|
+
minVersion: "17.1.0",
|
|
1912
|
+
version: "22.2.1",
|
|
1913
|
+
type: UiPieChartComponent,
|
|
1914
|
+
isStandalone: true,
|
|
1915
|
+
selector: "ui-pie-chart",
|
|
1916
|
+
inputs: {
|
|
1917
|
+
variant: {
|
|
1918
|
+
classPropertyName: "variant",
|
|
1919
|
+
publicName: "variant",
|
|
1920
|
+
isSignal: true,
|
|
1921
|
+
isRequired: false,
|
|
1922
|
+
transformFunction: null
|
|
1923
|
+
},
|
|
1924
|
+
totalLabel: {
|
|
1925
|
+
classPropertyName: "totalLabel",
|
|
1926
|
+
publicName: "totalLabel",
|
|
1927
|
+
isSignal: true,
|
|
1928
|
+
isRequired: false,
|
|
1929
|
+
transformFunction: null
|
|
1930
|
+
}
|
|
1931
|
+
},
|
|
1932
|
+
host: { classAttribute: "block w-full min-w-0" },
|
|
1933
|
+
usesInheritance: true,
|
|
1934
|
+
ngImport: i0,
|
|
1935
|
+
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [valueFormatter]=\"valueFormatter()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n/>\n",
|
|
1936
|
+
dependencies: [{
|
|
1937
|
+
kind: "component",
|
|
1938
|
+
type: UiChartFrameComponent,
|
|
1939
|
+
selector: "ui-chart-frame",
|
|
1940
|
+
inputs: [
|
|
1941
|
+
"options",
|
|
1942
|
+
"ariaLabel",
|
|
1943
|
+
"categories",
|
|
1944
|
+
"series",
|
|
1945
|
+
"legendItems",
|
|
1946
|
+
"legendNote",
|
|
1947
|
+
"hiddenSeries",
|
|
1948
|
+
"valueFormatter",
|
|
1949
|
+
"categoryLabel",
|
|
1950
|
+
"height",
|
|
1951
|
+
"emptyText",
|
|
1952
|
+
"loading",
|
|
1953
|
+
"empty",
|
|
1954
|
+
"showTable"
|
|
1955
|
+
],
|
|
1956
|
+
outputs: ["hiddenSeriesChange"]
|
|
1957
|
+
}]
|
|
1958
|
+
});
|
|
1959
|
+
};
|
|
1960
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
1961
|
+
minVersion: "12.0.0",
|
|
1962
|
+
version: "22.2.1",
|
|
1963
|
+
ngImport: i0,
|
|
1964
|
+
type: UiPieChartComponent,
|
|
1965
|
+
decorators: [{
|
|
1966
|
+
type: Component,
|
|
1967
|
+
args: [{
|
|
1968
|
+
selector: "ui-pie-chart",
|
|
1969
|
+
imports: [UiChartFrameComponent],
|
|
1970
|
+
host: { class: "block w-full min-w-0" },
|
|
1971
|
+
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [valueFormatter]=\"valueFormatter()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n/>\n"
|
|
1972
|
+
}]
|
|
1973
|
+
}],
|
|
1974
|
+
propDecorators: {
|
|
1975
|
+
variant: [{
|
|
1976
|
+
type: i0.Input,
|
|
1977
|
+
args: [{
|
|
1978
|
+
isSignal: true,
|
|
1979
|
+
alias: "variant",
|
|
1980
|
+
required: false
|
|
1981
|
+
}]
|
|
1982
|
+
}],
|
|
1983
|
+
totalLabel: [{
|
|
1984
|
+
type: i0.Input,
|
|
1985
|
+
args: [{
|
|
1986
|
+
isSignal: true,
|
|
1987
|
+
alias: "totalLabel",
|
|
1988
|
+
required: false
|
|
1989
|
+
}]
|
|
1990
|
+
}]
|
|
1991
|
+
}
|
|
1992
|
+
});
|
|
1993
|
+
const PieChartVariants = ["pie", "donut"];
|
|
1791
1994
|
var UiCheckboxComponent = class UiCheckboxComponent {
|
|
1792
1995
|
value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
1793
1996
|
id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
|
|
@@ -4562,7 +4765,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4562
4765
|
isSignal: true
|
|
4563
4766
|
}],
|
|
4564
4767
|
ngImport: i0,
|
|
4565
|
-
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n [placement]=\"placement()\"\n [closeBehaviour]=\"closeBehaviour()\"\n matchWidth=\"minWidth\"\n class=\"w-full\"\n>\n @if (searchMode() === 'inline') {\n <ui-input\n [value]=\"isOpen() ? query() : triggerLabel()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"triggerLabel()\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaHasPopup=\"listbox\"\n class=\"border-0!\"\n classes=\"h-auto!\"\n autocomplete=\"off\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-template #trailing>\n <ng-icon\n name=\"heroChevronDown\"\n class=\"mx-3 size-4 text-muted-foreground shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div class=\"ui-select-trigger\" [class.ui-select-trigger--tags]=\"showTags()\">\n <button\n type=\"button\"\n class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"id() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (showTags()) {\n <!-- the visible tags sit on top, this names the button for screen readers -->\n <span class=\"sr-only\">{{ triggerLabel() }}</span>\n } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n <ng-container\n *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n />\n </span>\n } @else if (multiple()) {\n <span class=\"ui-select-label ui-text-body\">\n <span class=\"ui-select-label-sizer\" aria-hidden=\"true\">{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{ triggerLabel() }}</span>\n </span>\n } @else {\n <span class=\"truncate ui-text-body\">{{ triggerLabel() }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span class=\"ui-select-tags-sizer ui-text-body\" aria-hidden=\"true\">\n {{ placeholder() }}\n </span>\n\n <div class=\"ui-select-tags\">\n @for (item of selectedItems(); track $index) {\n <ui-badge\n intent=\"secondary\"\n appearance=\"soft\"\n size=\"xs\"\n classes=\"ui-select-tag ui-text-caption\"\n >\n <span class=\"truncate\">{{ displayWith()(item) }}</span>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-select-tag-remove\"\n [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n (click)=\"removeItem(item)\"\n >\n <ng-icon name=\"heroXMark\" class=\"size-3 shrink-0\" />\n </button>\n }\n </ui-badge>\n } @empty {\n <span class=\"text-muted-foreground-1 truncate ui-text-body\">\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y\">\n @if (searchMode() === 'dropdown') {\n <div class=\"p-2\">\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n (keydown)=\"onKeydown($event)\"\n [ariaExpanded]=\"true\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaLabel=\"Search options\"\n autocomplete=\"off\"\n placeholder=\"Search...\"\n />\n </div>\n }\n\n <div\n #scrollContainer\n class=\"py-1 max-h-60 overflow-y-auto\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll(scrollContainer)\"\n >\n @for (row of rows(); track row.id) {\n @switch (row.kind) {\n @case ('group') {\n <div\n class=\"ui-select-group ui-text-caption\"\n role=\"presentation\"\n >\n {{ row.label }}\n </div>\n }\n @case ('clear') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"text-muted-foreground-1 ui-select-option ui-text-body-alt\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"clear()\"\n >\n <span class=\"truncate\">{{ clearLabel() }}</span>\n </button>\n }\n @case ('item') {\n <button\n type=\"button\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"text-dropdown-item-foreground ui-select-option ui-text-body-alt\"\n [attr.id]=\"row.id\"\n [attr.aria-selected]=\"row.selected\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onItemClick(row.item)\"\n >\n @if (optionTemplate(); as template) {\n <span class=\"flex items-center gap-2 min-w-0 grow\">\n <ng-container\n *ngTemplateOutlet=\"template; context: {\n $implicit: row.item,\n selected: row.selected,\n active: row.index === activeIndex()\n }\"\n />\n </span>\n } @else {\n <span class=\"truncate\">{{ row.label }}</span>\n }\n\n @if (row.selected) {\n <ng-icon\n name=\"heroCheck\"\n class=\"size-4 text-primary-600! shrink-0\"\n strokeWidth=\"2.5\"\n />\n }\n </button>\n }\n @case ('create') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"justify-start! text-primary-600 ui-select-option ui-text-body-alt\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onCreate()\"\n >\n <ng-icon name=\"heroPlus\" class=\"size-4 shrink-0\" />\n <span class=\"truncate\">{{ createLabel()(row.query) }}</span>\n </button>\n }\n }\n }\n\n @if (loading()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n Loading...\n </div>\n }\n\n @if (!loading() && items().length === 0 && !createQuery()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n No results\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
4768
|
+
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n [placement]=\"placement()\"\n [closeBehaviour]=\"closeBehaviour()\"\n matchWidth=\"minWidth\"\n class=\"w-full\"\n>\n @if (searchMode() === 'inline') {\n <ui-input\n [value]=\"isOpen() ? query() : triggerLabel()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"triggerLabel()\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaHasPopup=\"listbox\"\n class=\"border-0!\"\n classes=\"h-auto!\"\n autocomplete=\"off\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-template #trailing>\n <ng-icon\n name=\"heroChevronDown\"\n class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div\n class=\"ui-select-trigger\"\n [class.ui-select-trigger--tags]=\"showTags()\"\n >\n <button\n type=\"button\"\n class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"id() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (showTags()) {\n <!-- the visible tags sit on top, this names the button for screen readers -->\n <span class=\"sr-only\">{{ triggerLabel() }}</span>\n } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n <ng-container\n *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n />\n </span>\n } @else if (multiple()) {\n <span class=\"ui-text-body ui-select-label\">\n <span\n class=\"ui-select-label-sizer\"\n aria-hidden=\"true\"\n >{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{\n triggerLabel()\n }}</span>\n </span>\n } @else {\n <span class=\"ui-text-body truncate\">{{\n triggerLabel()\n }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span\n class=\"ui-text-body ui-select-tags-sizer\"\n aria-hidden=\"true\"\n >\n {{ placeholder() }}\n </span>\n\n <div class=\"ui-select-tags\">\n @for (item of selectedItems(); track $index) {\n <ui-badge\n intent=\"secondary\"\n appearance=\"soft\"\n size=\"xs\"\n classes=\"ui-select-tag ui-text-caption\"\n >\n <span class=\"truncate\">{{\n displayWith()(item)\n }}</span>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-select-tag-remove\"\n [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n (click)=\"removeItem(item)\"\n >\n <ng-icon\n name=\"heroXMark\"\n class=\"size-3 shrink-0\"\n />\n </button>\n }\n </ui-badge>\n } @empty {\n <span\n class=\"text-muted-foreground-1 ui-text-body truncate\"\n >\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y\">\n @if (searchMode() === 'dropdown') {\n <div class=\"p-2\">\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n (keydown)=\"onKeydown($event)\"\n [ariaExpanded]=\"true\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaLabel=\"Search options\"\n autocomplete=\"off\"\n placeholder=\"Search...\"\n />\n </div>\n }\n\n <div\n #scrollContainer\n class=\"py-1 max-h-60 overflow-y-auto\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll(scrollContainer)\"\n >\n @for (row of rows(); track row.id) {\n @switch (row.kind) {\n @case ('group') {\n <div\n class=\"ui-text-caption ui-select-group\"\n role=\"presentation\"\n >\n {{ row.label }}\n </div>\n }\n @case ('clear') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"clear()\"\n >\n <span class=\"truncate\">{{\n clearLabel()\n }}</span>\n </button>\n }\n @case ('item') {\n <button\n type=\"button\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.aria-selected]=\"row.selected\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onItemClick(row.item)\"\n >\n @if (optionTemplate(); as template) {\n <span\n class=\"flex items-center gap-2 min-w-0 grow\"\n >\n <ng-container\n *ngTemplateOutlet=\"template; context: {\n $implicit: row.item,\n selected: row.selected,\n active: row.index === activeIndex()\n }\"\n />\n </span>\n } @else {\n <span class=\"truncate\">{{\n row.label\n }}</span>\n }\n\n @if (row.selected) {\n <ng-icon\n name=\"heroCheck\"\n class=\"size-4 text-primary-600! shrink-0\"\n strokeWidth=\"2.5\"\n />\n }\n </button>\n }\n @case ('create') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onCreate()\"\n >\n <ng-icon\n name=\"heroPlus\"\n class=\"size-4 shrink-0\"\n />\n <span class=\"truncate\">{{\n createLabel()(row.query)\n }}</span>\n </button>\n }\n }\n }\n\n @if (loading()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n Loading...\n </div>\n }\n\n @if (!loading() && items().length === 0 && !createQuery()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n No results\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
4566
4769
|
styles: ["@layer properties;:host{position:relative;display:inline-flex;width:100%;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 10);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
4567
4770
|
dependencies: [
|
|
4568
4771
|
{
|
|
@@ -4680,7 +4883,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4680
4883
|
NgTemplateOutlet
|
|
4681
4884
|
],
|
|
4682
4885
|
host: { "(focusout)": "onFocusOut($event)" },
|
|
4683
|
-
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n [placement]=\"placement()\"\n [closeBehaviour]=\"closeBehaviour()\"\n matchWidth=\"minWidth\"\n class=\"w-full\"\n>\n @if (searchMode() === 'inline') {\n <ui-input\n [value]=\"isOpen() ? query() : triggerLabel()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"triggerLabel()\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaHasPopup=\"listbox\"\n class=\"border-0!\"\n classes=\"h-auto!\"\n autocomplete=\"off\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-template #trailing>\n <ng-icon\n name=\"heroChevronDown\"\n class=\"mx-3 size-4 text-muted-foreground shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div class=\"ui-select-trigger\" [class.ui-select-trigger--tags]=\"showTags()\">\n <button\n type=\"button\"\n class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"id() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (showTags()) {\n <!-- the visible tags sit on top, this names the button for screen readers -->\n <span class=\"sr-only\">{{ triggerLabel() }}</span>\n } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n <ng-container\n *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n />\n </span>\n } @else if (multiple()) {\n <span class=\"ui-select-label ui-text-body\">\n <span class=\"ui-select-label-sizer\" aria-hidden=\"true\">{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{ triggerLabel() }}</span>\n </span>\n } @else {\n <span class=\"truncate ui-text-body\">{{ triggerLabel() }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span class=\"ui-select-tags-sizer ui-text-body\" aria-hidden=\"true\">\n {{ placeholder() }}\n </span>\n\n <div class=\"ui-select-tags\">\n @for (item of selectedItems(); track $index) {\n <ui-badge\n intent=\"secondary\"\n appearance=\"soft\"\n size=\"xs\"\n classes=\"ui-select-tag ui-text-caption\"\n >\n <span class=\"truncate\">{{ displayWith()(item) }}</span>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-select-tag-remove\"\n [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n (click)=\"removeItem(item)\"\n >\n <ng-icon name=\"heroXMark\" class=\"size-3 shrink-0\" />\n </button>\n }\n </ui-badge>\n } @empty {\n <span class=\"text-muted-foreground-1 truncate ui-text-body\">\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y\">\n @if (searchMode() === 'dropdown') {\n <div class=\"p-2\">\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n (keydown)=\"onKeydown($event)\"\n [ariaExpanded]=\"true\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaLabel=\"Search options\"\n autocomplete=\"off\"\n placeholder=\"Search...\"\n />\n </div>\n }\n\n <div\n #scrollContainer\n class=\"py-1 max-h-60 overflow-y-auto\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll(scrollContainer)\"\n >\n @for (row of rows(); track row.id) {\n @switch (row.kind) {\n @case ('group') {\n <div\n class=\"ui-select-group ui-text-caption\"\n role=\"presentation\"\n >\n {{ row.label }}\n </div>\n }\n @case ('clear') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"text-muted-foreground-1 ui-select-option ui-text-body-alt\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"clear()\"\n >\n <span class=\"truncate\">{{ clearLabel() }}</span>\n </button>\n }\n @case ('item') {\n <button\n type=\"button\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"text-dropdown-item-foreground ui-select-option ui-text-body-alt\"\n [attr.id]=\"row.id\"\n [attr.aria-selected]=\"row.selected\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onItemClick(row.item)\"\n >\n @if (optionTemplate(); as template) {\n <span class=\"flex items-center gap-2 min-w-0 grow\">\n <ng-container\n *ngTemplateOutlet=\"template; context: {\n $implicit: row.item,\n selected: row.selected,\n active: row.index === activeIndex()\n }\"\n />\n </span>\n } @else {\n <span class=\"truncate\">{{ row.label }}</span>\n }\n\n @if (row.selected) {\n <ng-icon\n name=\"heroCheck\"\n class=\"size-4 text-primary-600! shrink-0\"\n strokeWidth=\"2.5\"\n />\n }\n </button>\n }\n @case ('create') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"justify-start! text-primary-600 ui-select-option ui-text-body-alt\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onCreate()\"\n >\n <ng-icon name=\"heroPlus\" class=\"size-4 shrink-0\" />\n <span class=\"truncate\">{{ createLabel()(row.query) }}</span>\n </button>\n }\n }\n }\n\n @if (loading()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n Loading...\n </div>\n }\n\n @if (!loading() && items().length === 0 && !createQuery()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n No results\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
4886
|
+
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n [placement]=\"placement()\"\n [closeBehaviour]=\"closeBehaviour()\"\n matchWidth=\"minWidth\"\n class=\"w-full\"\n>\n @if (searchMode() === 'inline') {\n <ui-input\n [value]=\"isOpen() ? query() : triggerLabel()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"triggerLabel()\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaHasPopup=\"listbox\"\n class=\"border-0!\"\n classes=\"h-auto!\"\n autocomplete=\"off\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-template #trailing>\n <ng-icon\n name=\"heroChevronDown\"\n class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div\n class=\"ui-select-trigger\"\n [class.ui-select-trigger--tags]=\"showTags()\"\n >\n <button\n type=\"button\"\n class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"id() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (showTags()) {\n <!-- the visible tags sit on top, this names the button for screen readers -->\n <span class=\"sr-only\">{{ triggerLabel() }}</span>\n } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n <ng-container\n *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n />\n </span>\n } @else if (multiple()) {\n <span class=\"ui-text-body ui-select-label\">\n <span\n class=\"ui-select-label-sizer\"\n aria-hidden=\"true\"\n >{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{\n triggerLabel()\n }}</span>\n </span>\n } @else {\n <span class=\"ui-text-body truncate\">{{\n triggerLabel()\n }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span\n class=\"ui-text-body ui-select-tags-sizer\"\n aria-hidden=\"true\"\n >\n {{ placeholder() }}\n </span>\n\n <div class=\"ui-select-tags\">\n @for (item of selectedItems(); track $index) {\n <ui-badge\n intent=\"secondary\"\n appearance=\"soft\"\n size=\"xs\"\n classes=\"ui-select-tag ui-text-caption\"\n >\n <span class=\"truncate\">{{\n displayWith()(item)\n }}</span>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-select-tag-remove\"\n [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n (click)=\"removeItem(item)\"\n >\n <ng-icon\n name=\"heroXMark\"\n class=\"size-3 shrink-0\"\n />\n </button>\n }\n </ui-badge>\n } @empty {\n <span\n class=\"text-muted-foreground-1 ui-text-body truncate\"\n >\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y\">\n @if (searchMode() === 'dropdown') {\n <div class=\"p-2\">\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n (keydown)=\"onKeydown($event)\"\n [ariaExpanded]=\"true\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaLabel=\"Search options\"\n autocomplete=\"off\"\n placeholder=\"Search...\"\n />\n </div>\n }\n\n <div\n #scrollContainer\n class=\"py-1 max-h-60 overflow-y-auto\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll(scrollContainer)\"\n >\n @for (row of rows(); track row.id) {\n @switch (row.kind) {\n @case ('group') {\n <div\n class=\"ui-text-caption ui-select-group\"\n role=\"presentation\"\n >\n {{ row.label }}\n </div>\n }\n @case ('clear') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"clear()\"\n >\n <span class=\"truncate\">{{\n clearLabel()\n }}</span>\n </button>\n }\n @case ('item') {\n <button\n type=\"button\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.aria-selected]=\"row.selected\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onItemClick(row.item)\"\n >\n @if (optionTemplate(); as template) {\n <span\n class=\"flex items-center gap-2 min-w-0 grow\"\n >\n <ng-container\n *ngTemplateOutlet=\"template; context: {\n $implicit: row.item,\n selected: row.selected,\n active: row.index === activeIndex()\n }\"\n />\n </span>\n } @else {\n <span class=\"truncate\">{{\n row.label\n }}</span>\n }\n\n @if (row.selected) {\n <ng-icon\n name=\"heroCheck\"\n class=\"size-4 text-primary-600! shrink-0\"\n strokeWidth=\"2.5\"\n />\n }\n </button>\n }\n @case ('create') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onCreate()\"\n >\n <ng-icon\n name=\"heroPlus\"\n class=\"size-4 shrink-0\"\n />\n <span class=\"truncate\">{{\n createLabel()(row.query)\n }}</span>\n </button>\n }\n }\n }\n\n @if (loading()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n Loading...\n </div>\n }\n\n @if (!loading() && items().length === 0 && !createQuery()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n No results\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
4684
4887
|
styles: ["@layer properties;:host{position:relative;display:inline-flex;width:100%;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 10);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
4685
4888
|
}]
|
|
4686
4889
|
}],
|
|
@@ -6260,6 +6463,7 @@ var UiKpiComponent = class UiKpiComponent {
|
|
|
6260
6463
|
value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
6261
6464
|
hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
6262
6465
|
icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
|
|
6466
|
+
iconPosition = input("left", ...ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []);
|
|
6263
6467
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
6264
6468
|
minVersion: "12.0.0",
|
|
6265
6469
|
version: "22.2.1",
|
|
@@ -6302,10 +6506,17 @@ var UiKpiComponent = class UiKpiComponent {
|
|
|
6302
6506
|
isSignal: true,
|
|
6303
6507
|
isRequired: false,
|
|
6304
6508
|
transformFunction: null
|
|
6509
|
+
},
|
|
6510
|
+
iconPosition: {
|
|
6511
|
+
classPropertyName: "iconPosition",
|
|
6512
|
+
publicName: "iconPosition",
|
|
6513
|
+
isSignal: true,
|
|
6514
|
+
isRequired: false,
|
|
6515
|
+
transformFunction: null
|
|
6305
6516
|
}
|
|
6306
6517
|
},
|
|
6307
6518
|
ngImport: i0,
|
|
6308
|
-
template: "<div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon()) {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2\">\n <p class=\"text-muted-foreground-2 ui-text-h4 uppercase\">\n {{ title() }}\n </p>\n <!-- todo: insert tooltip component later -->\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"text-foreground ui-text-
|
|
6519
|
+
template: "<div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon() && iconPosition() === 'left') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2\">\n <p class=\"font-semibold text-muted-foreground-2 ui-text-h4 text-sm uppercase\">\n {{ title() }}\n </p>\n <!-- todo: insert tooltip component later -->\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"font-semibold text-foreground ui-text-h2\">\n <!-- falls back to the plain value when nothing is projected -->\n <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n </h3>\n <ng-content select=\"[kpi-badge]\"></ng-content>\n </div>\n </div>\n\n @if (icon() && iconPosition() === 'right') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n</div>\n",
|
|
6309
6520
|
styles: ["@layer properties;:host{display:flex;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
6310
6521
|
dependencies: [{
|
|
6311
6522
|
kind: "component",
|
|
@@ -6331,7 +6542,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6331
6542
|
args: [{
|
|
6332
6543
|
selector: "ui-kpi",
|
|
6333
6544
|
imports: [NgIcon],
|
|
6334
|
-
template: "<div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon()) {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2\">\n <p class=\"text-muted-foreground-2 ui-text-h4 uppercase\">\n {{ title() }}\n </p>\n <!-- todo: insert tooltip component later -->\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"text-foreground ui-text-
|
|
6545
|
+
template: "<div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon() && iconPosition() === 'left') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2\">\n <p class=\"font-semibold text-muted-foreground-2 ui-text-h4 text-sm uppercase\">\n {{ title() }}\n </p>\n <!-- todo: insert tooltip component later -->\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"font-semibold text-foreground ui-text-h2\">\n <!-- falls back to the plain value when nothing is projected -->\n <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n </h3>\n <ng-content select=\"[kpi-badge]\"></ng-content>\n </div>\n </div>\n\n @if (icon() && iconPosition() === 'right') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n</div>\n",
|
|
6335
6546
|
styles: ["@layer properties;:host{display:flex;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6336
6547
|
}]
|
|
6337
6548
|
}],
|
|
@@ -6367,6 +6578,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6367
6578
|
alias: "icon",
|
|
6368
6579
|
required: false
|
|
6369
6580
|
}]
|
|
6581
|
+
}],
|
|
6582
|
+
iconPosition: [{
|
|
6583
|
+
type: i0.Input,
|
|
6584
|
+
args: [{
|
|
6585
|
+
isSignal: true,
|
|
6586
|
+
alias: "iconPosition",
|
|
6587
|
+
required: false
|
|
6588
|
+
}]
|
|
6370
6589
|
}]
|
|
6371
6590
|
}
|
|
6372
6591
|
});
|
|
@@ -11572,6 +11791,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11572
11791
|
}]
|
|
11573
11792
|
}
|
|
11574
11793
|
});
|
|
11575
|
-
export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_LOADING_TYPES, UiAlertComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiProgressComponent, UiRadioComponent, UiSelectComponent, UiSidebarComponent, UiSidebarItemComponent, UiSkeletonComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, WeekStarts, defaultDateRangePresets, financialYearPreset, lastDaysPreset, monthPreset, thisWeekPreset, todayPreset, yearPreset };
|
|
11794
|
+
export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_LOADING_TYPES, UiAlertComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiProgressComponent, UiRadioComponent, UiSelectComponent, UiSidebarComponent, UiSidebarItemComponent, UiSkeletonComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, WeekStarts, defaultDateRangePresets, financialYearPreset, lastDaysPreset, monthPreset, thisWeekPreset, todayPreset, yearPreset };
|
|
11576
11795
|
|
|
11577
11796
|
//# sourceMappingURL=area8975-ui.mjs.map
|