src/lib/configuration/sz-preferences/sz-preferences.component.ts
Provides a service integration web component(WC) that can be used to set, read, change, and respoond to UI bus event/preference changes.
For Angular implementations we recommend using SzPrefsService as an injectable as it provides the more robust solution.
Example :<!-- (WC) javascript -->
<sz-wc-preferences id="prefsIntf"></sz-wc-preferences>
<script>document.getElementById('prefsIntf').GraphBuildOut = 5;</script><!-- (WC) By attribute: -->
<sz-wc-preferences
graph-build-out="20"></sz-wc-preferences><!-- (WC) javascript bulk initialize from local storage: -->
<sz-wc-preferences id="prefsIntf" show-controls="true"></sz-wc-preferences>
<script>
document.getElementById('prefsIntf').prefsFromJSONString = localStorage.getItem('NAME_OF_LS_KEY');
</script><!-- (WC) show other data in search results: -->
<sz-wc-preferences
search-results-show-other-data="true"></sz-wc-preferences><!-- (WC) show interactive UI: -->
<sz-wc-preferences
show-controls="true"></sz-wc-preferences><!-- (Angular) -->
<sz-preferences
(prefsChange)="myPrefsChangeHandler($event)">
OnInit
OnDestroy
| selector | sz-preferences |
| styleUrls | sz-preferences.component.scss |
| templateUrl | sz-preferences.component.html |
constructor(prefs: SzPrefsService, datasources: SzDataSourcesService)
|
|||||||||
|
Parameters :
|
| EntityDetailDisclosedRelationshipsSectionCollapsed |
Type : boolean
|
|
disclosed relationships section collapsed in entity detail component |
| EntityDetailGraphSectionCollapsed |
Type : boolean
|
|
graph section collapsed in entity detail component |
| EntityDetailHideGraphWhenZeroRelations |
Type : boolean
|
|
collapse graph section when no graphable relationships present in entity detail component |
| EntityDetailOpenLinksInNewTab |
Type : boolean
|
|
open a new tab when a user clicks a entity result in entity detail component |
| EntityDetailPossibleMatchesSectionCollapsed |
Type : boolean
|
|
possible matches section collapsed in entity detail component |
| EntityDetailPossibleRelationshipsSectionCollapsed |
Type : boolean
|
|
possible relationships section collapsed in entity detail component |
| EntityDetailRecordsSectionCollapsed |
Type : boolean
|
|
records/matches section collapsed in entity detail component |
| EntityDetailRememberSectionCollapsedState |
Type : boolean
|
|
publish prefs change events on section collapsed state changes in entity detail component |
| EntityDetailShowDisclosedSection |
Type : boolean
|
|
show the disclosed section in entity detail component |
| EntityDetailShowGraphSection |
Type : boolean
|
|
show the graph section in entity detail component |
| EntityDetailShowMatchesSection |
Type : boolean
|
|
show the matches section in entity detail component |
| EntityDetailShowOtherData |
Type : boolean
|
|
show "other data" in entity detail component |
| EntityDetailShowOtherDataInEntities |
Type : boolean
|
|
show "other data" in entity composites (ie non-records/matches) in entity detail component |
| EntityDetailShowOtherDataInRecords |
Type : boolean
|
|
show "other data" in records/matches section in entity detail component |
| EntityDetailShowOtherDataInSummary |
Type : boolean
|
|
show "other data" in header summary in entity detail component |
| EntityDetailShowPossibleMatchesSection |
Type : boolean
|
|
show the possible matches section in entity detail component |
| EntityDetailShowPossibleRelationshipsSection |
Type : boolean
|
|
show the possible relationships section in entity detail component |
| EntityDetailShowRecordIdWhenNative |
Type : boolean
|
|
show "record ids" in entity detail component when not auto-generated |
| EntityDetailShowTopEntityRecordIdsWhenSingular |
Type : boolean
|
|
show top "record id" for entity composites when source record(s) is singular |
| EntityDetailTruncateOtherDataAt |
Type : number
|
|
lines of "other data" shown before ellipsis in entity detail component |
| EntityDetailTruncateOtherDataInRecordsAt |
Type : number
|
|
lines of "other data" shown before ellipsis for records/matches in entity detail component |
| EntityDetailTruncateSummaryAt |
Type : number
|
|
lines shown before ellipsis in entity detail header summary |
| GraphBuildOut |
Type : number
|
|
the value of "buildOut" parameter displayed in graph component. sets distance of relationships shown. default is 1. |
| GraphDataSourceColors |
Type : any
|
|
map of datasource -> color to highlight nodes with when belonging to data source in stand-alone graph |
| GraphMaxDegreesOfSeparation |
Type : number
|
|
the value of "maxDegrees" parameter displayed in graph component |
| GraphMaxEntities |
Type : number
|
|
maximum nuber of entitities displayed in graph component. useful for overflow scenarios |
| GraphOpenInNewTab |
Type : boolean
|
|
open a new tab when a user clicks a entity node in stand-alone graph |
| GraphOpenInSidePanel |
Type : boolean
|
|
open a side panel inspector when a user clicks a entity node in stand-alone graph |
| GraphRememberStateOptions |
Type : boolean
|
|
publish prefs change events on state change in graph component |
| GraphShowLinkLabels |
Type : boolean
|
|
show match keys on relationship edges in graph |
| prefsFromJSONString |
Type : string
|
|
a JSON string value used for initializing preferences state from a JSON representation. |
| SearchFormAllowedTypeAttributes |
Type : [] | string
|
|
the allowed identifier types to show in the search form pulldown |
| SearchResultsLinkToEmbeddedGraph |
Type : boolean
|
|
update embedded graph focus in search results on click |
| SearchResultsOpenInNewTab |
Type : boolean
|
|
open a new tab when a user clicks a search result |
| SearchResultsShowCharacteristicData |
Type : boolean
|
|
show "attribute data" ie "login id, email address etc" in search results |
| SearchResultsShowEmbeddedGraph |
Type : boolean
|
|
show embedded graph in search results |
| SearchResultsShowMatchRecords |
Type : boolean
|
|
show "match keys" in search results |
| SearchResultsShowOtherData |
Type : boolean
|
|
show "other data" in search results |
| SearchResultsShowRecordIds |
Type : boolean
|
|
show "record ids" in search results |
| SearchResultsTruncateCharacteristicDataAt |
Type : number
|
|
number of lines of "attribute data" shown before ellipsis in search results |
| SearchResultsTruncateIdentifierDataAt |
Type : number
|
|
number of lines of "identifier data" shown before ellipsis in search results |
| SearchResultsTruncateOtherDataAt |
Type : number
|
|
number of lines of "other data" shown before ellipsis in search results |
| SearchResultsTruncateRecordsAt |
Type : number
|
|
number of lines shown before ellipsis in search results |
| showControls |
Type : boolean
|
Default value : false
|
|
show control interface |
| prefsChange |
Type : EventEmitter<SzSdkPrefsModel>
|
|
emmitted when a property has been changed. used mostly for diagnostics. |
| Public boolPrefChecked |
boolPrefChecked(prefGroup: string, prefKey: string)
|
|
get the linked ref to a specific pref whos type should be boolean through a fn
Returns :
boolean
|
| Public getDataSources |
getDataSources()
|
|
helper method for retrieving list of datasources
Returns :
any
|
| ngOnDestroy |
ngOnDestroy()
|
|
unsubscribe when component is destroyed
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public prefValAsInt |
prefValAsInt(prefGroup: string, prefKey: string)
|
|
get the linked ref to a specific pref whos type should be number through a fn
Returns :
number
|
| Public SortByInputType | ||||||
SortByInputType(x, y)
|
||||||
|
reusable sorting method. does what it says
Parameters :
Returns :
1 | -1 | 0
|
| Public SortByName | ||||||
SortByName(x, y)
|
||||||
|
reusable sorting method. does what it says
Parameters :
Returns :
1 | -1 | 0
|
| Public toSentenceCase | ||||||
toSentenceCase(str: string)
|
||||||
|
helper fn to break a camel-case string in to a sentence case string
Parameters :
Returns :
any
|
| updateBoolPrefValue |
updateBoolPrefValue(prefGroup: string, prefKey: string, evt)
|
|
update a specific pref whos type should be boolean through a fn
Returns :
void
|
| updateIntPrefValue |
updateIntPrefValue(prefGroup: string, prefKey: string, event: any)
|
|
get the linked ref to a specific pref whos type should be number through a fn
Returns :
void
|
| Public datasources |
Type : SzDataSourcesService
|
| Public entityDetailOptions |
Default value : this.getNameSpaceOptions('entityDetail')
|
| Public graphOptions |
Default value : this.getNameSpaceOptions('graph')
|
| Public searchFormOptions |
Default value : this.getNameSpaceOptions('searchForm')
|
| Public searchResultsOptions |
Default value : this.getNameSpaceOptions('searchResults')
|
| Public unsubscribe$ |
Default value : new Subject<void>()
|
|
subscription to notify subscribers to unbind |
| SearchFormAllowedTypeAttributes | ||||||
getSearchFormAllowedTypeAttributes()
|
||||||
|
the allowed identifier types to show in the search form pulldown Example :
Example :
Returns :
[] | string
|
||||||
setSearchFormAllowedTypeAttributes(value: string[] | string)
|
||||||
|
the allowed identifier types to show in the search form pulldown
Parameters :
Returns :
void
|
| SearchResultsOpenInNewTab | ||||||
getSearchResultsOpenInNewTab()
|
||||||
|
open a new tab when a user clicks a search result Example :
Example :
Returns :
boolean
|
||||||
setSearchResultsOpenInNewTab(value: boolean)
|
||||||
|
open a new tab when a user clicks a search result
Parameters :
Returns :
void
|
| SearchResultsShowOtherData | ||||||
getSearchResultsShowOtherData()
|
||||||
|
show "other data" in search results
Returns :
boolean
|
||||||
setSearchResultsShowOtherData(value: boolean)
|
||||||
|
show "other data" in search results
Parameters :
Returns :
void
|
| SearchResultsShowCharacteristicData | ||||||
getSearchResultsShowCharacteristicData()
|
||||||
|
show "attribute data" ie "login id, email address etc" in search results
Returns :
boolean
|
||||||
setSearchResultsShowCharacteristicData(value: boolean)
|
||||||
|
show "attribute data" ie "login id, email address etc" in search results
Parameters :
Returns :
void
|
| SearchResultsShowMatchRecords | ||||||
getSearchResultsShowMatchRecords()
|
||||||
|
show "match keys" in search results
Returns :
boolean
|
||||||
setSearchResultsShowMatchRecords(value: boolean)
|
||||||
|
show "match keys" in search results
Parameters :
Returns :
void
|
| SearchResultsShowRecordIds | ||||||
getSearchResultsShowRecordIds()
|
||||||
|
show "record ids" in search results
Returns :
boolean
|
||||||
setSearchResultsShowRecordIds(value: boolean)
|
||||||
|
show "record ids" in search results
Parameters :
Returns :
void
|
| SearchResultsTruncateRecordsAt | ||||||
getSearchResultsTruncateRecordsAt()
|
||||||
|
number of lines shown before ellipsis in search results
Returns :
number
|
||||||
setSearchResultsTruncateRecordsAt(value: number)
|
||||||
|
number of lines shown before ellipsis in search results
Parameters :
Returns :
void
|
| SearchResultsTruncateOtherDataAt | ||||||
getSearchResultsTruncateOtherDataAt()
|
||||||
|
number of lines of "other data" shown before ellipsis in search results
Returns :
number
|
||||||
setSearchResultsTruncateOtherDataAt(value: number)
|
||||||
|
number of lines of "other data" shown before ellipsis in search results
Parameters :
Returns :
void
|
| SearchResultsTruncateCharacteristicDataAt | ||||||
getSearchResultsTruncateCharacteristicDataAt()
|
||||||
|
number of lines of "attribute data" shown before ellipsis in search results
Returns :
number
|
||||||
setSearchResultsTruncateCharacteristicDataAt(value: number)
|
||||||
|
number of lines of "attribute data" shown before ellipsis in search results
Parameters :
Returns :
void
|
| SearchResultsShowEmbeddedGraph | ||||||
getSearchResultsShowEmbeddedGraph()
|
||||||
|
show embedded graph in search results
Returns :
boolean
|
||||||
setSearchResultsShowEmbeddedGraph(value: boolean)
|
||||||
|
show embedded graph in search results
Parameters :
Returns :
void
|
| SearchResultsLinkToEmbeddedGraph | ||||||
getSearchResultsLinkToEmbeddedGraph()
|
||||||
|
update embedded graph focus in search results on click
Returns :
boolean
|
||||||
setSearchResultsLinkToEmbeddedGraph(value: boolean)
|
||||||
|
update embedded graph focus in search results on click
Parameters :
Returns :
void
|
| SearchResultsTruncateIdentifierDataAt | ||||||
getSearchResultsTruncateIdentifierDataAt()
|
||||||
|
number of lines of "identifier data" shown before ellipsis in search results
Returns :
number
|
||||||
setSearchResultsTruncateIdentifierDataAt(value: number)
|
||||||
|
number of lines of "identifier data" shown before ellipsis in search results
Parameters :
Returns :
void
|
| EntityDetailShowGraphSection | ||||||
getEntityDetailShowGraphSection()
|
||||||
|
show the graph section in entity detail component
Returns :
boolean
|
||||||
setEntityDetailShowGraphSection(value: boolean)
|
||||||
|
show the graph section in entity detail component
Parameters :
Returns :
void
|
| EntityDetailShowMatchesSection | ||||||
getEntityDetailShowMatchesSection()
|
||||||
|
show the matches section in entity detail component
Returns :
boolean
|
||||||
setEntityDetailShowMatchesSection(value: boolean)
|
||||||
|
show the matches section in entity detail component
Parameters :
Returns :
void
|
| EntityDetailShowPossibleMatchesSection | ||||||
getEntityDetailShowPossibleMatchesSection()
|
||||||
|
show the possible matches section in entity detail component
Returns :
boolean
|
||||||
setEntityDetailShowPossibleMatchesSection(value: boolean)
|
||||||
|
show the possible matches section in entity detail component
Parameters :
Returns :
void
|
| EntityDetailShowPossibleRelationshipsSection | ||||||
getEntityDetailShowPossibleRelationshipsSection()
|
||||||
|
show the possible relationships section in entity detail component
Returns :
boolean
|
||||||
setEntityDetailShowPossibleRelationshipsSection(value: boolean)
|
||||||
|
show the possible relationships section in entity detail component
Parameters :
Returns :
void
|
| EntityDetailShowDisclosedSection | ||||||
getEntityDetailShowDisclosedSection()
|
||||||
|
show the disclosed section in entity detail component
Returns :
boolean
|
||||||
setEntityDetailShowDisclosedSection(value: boolean)
|
||||||
|
show the disclosed section in entity detail component
Parameters :
Returns :
void
|
| EntityDetailGraphSectionCollapsed | ||||||
getEntityDetailGraphSectionCollapsed()
|
||||||
|
graph section collapsed in entity detail component
Returns :
boolean
|
||||||
setEntityDetailGraphSectionCollapsed(value: boolean)
|
||||||
|
graph section collapsed in entity detail component
Parameters :
Returns :
void
|
| EntityDetailRecordsSectionCollapsed | ||||||
getEntityDetailRecordsSectionCollapsed()
|
||||||
|
records/matches section collapsed in entity detail component
Returns :
boolean
|
||||||
setEntityDetailRecordsSectionCollapsed(value: boolean)
|
||||||
|
records/matches section collapsed in entity detail component
Parameters :
Returns :
void
|
| EntityDetailPossibleMatchesSectionCollapsed | ||||||
getEntityDetailPossibleMatchesSectionCollapsed()
|
||||||
|
possible matches section collapsed in entity detail component
Returns :
boolean
|
||||||
setEntityDetailPossibleMatchesSectionCollapsed(value: boolean)
|
||||||
|
possible matches section collapsed in entity detail component
Parameters :
Returns :
void
|
| EntityDetailPossibleRelationshipsSectionCollapsed | ||||||
getEntityDetailPossibleRelationshipsSectionCollapsed()
|
||||||
|
possible relationships section collapsed in entity detail component
Returns :
boolean
|
||||||
setEntityDetailPossibleRelationshipsSectionCollapsed(value: boolean)
|
||||||
|
possible relationships section collapsed in entity detail component
Parameters :
Returns :
void
|
| EntityDetailDisclosedRelationshipsSectionCollapsed | ||||||
getEntityDetailDisclosedRelationshipsSectionCollapsed()
|
||||||
|
disclosed relationships section collapsed in entity detail component
Returns :
boolean
|
||||||
setEntityDetailDisclosedRelationshipsSectionCollapsed(value: boolean)
|
||||||
|
disclosed relationships section collapsed in entity detail component
Parameters :
Returns :
void
|
| EntityDetailRememberSectionCollapsedState | ||||||
getEntityDetailRememberSectionCollapsedState()
|
||||||
|
publish prefs change events on section collapsed state changes in entity detail component
Returns :
boolean
|
||||||
setEntityDetailRememberSectionCollapsedState(value: boolean)
|
||||||
|
publish prefs change events on section collapsed state changes in entity detail component
Parameters :
Returns :
void
|
| EntityDetailTruncateSummaryAt | ||||||
getEntityDetailTruncateSummaryAt()
|
||||||
|
lines shown before ellipsis in entity detail header summary
Returns :
number
|
||||||
setEntityDetailTruncateSummaryAt(value: number)
|
||||||
|
lines shown before ellipsis in entity detail header summary
Parameters :
Returns :
void
|
| EntityDetailShowOtherData | ||||||
getEntityDetailShowOtherData()
|
||||||
|
show "other data" in entity detail component
Returns :
boolean
|
||||||
setEntityDetailShowOtherData(value: boolean)
|
||||||
|
show "other data" in entity detail component
Parameters :
Returns :
void
|
| EntityDetailTruncateOtherDataAt | ||||||
getEntityDetailTruncateOtherDataAt()
|
||||||
|
lines of "other data" shown before ellipsis in entity detail component
Returns :
number
|
||||||
setEntityDetailTruncateOtherDataAt(value: number)
|
||||||
|
lines of "other data" shown before ellipsis in entity detail component
Parameters :
Returns :
void
|
| EntityDetailOpenLinksInNewTab | ||||||
getEntityDetailOpenLinksInNewTab()
|
||||||
|
open a new tab when a user clicks a entity result in entity detail component
Returns :
boolean
|
||||||
setEntityDetailOpenLinksInNewTab(value: boolean)
|
||||||
|
open a new tab when a user clicks a entity result in entity detail component
Parameters :
Returns :
void
|
| EntityDetailShowOtherDataInRecords | ||||||
getEntityDetailShowOtherDataInRecords()
|
||||||
|
show "other data" in records/matches section in entity detail component
Returns :
boolean
|
||||||
setEntityDetailShowOtherDataInRecords(value: boolean)
|
||||||
|
show "other data" in records/matches section in entity detail component
Parameters :
Returns :
void
|
| EntityDetailShowOtherDataInEntities | ||||||
getEntityDetailShowOtherDataInEntities()
|
||||||
|
show "other data" in entity composites (ie non-records/matches) in entity detail component
Returns :
boolean
|
||||||
setEntityDetailShowOtherDataInEntities(value: boolean)
|
||||||
|
show "other data" in entity composites (ie non-records/matches) in entity detail component
Parameters :
Returns :
void
|
| EntityDetailShowOtherDataInSummary | ||||||
getEntityDetailShowOtherDataInSummary()
|
||||||
|
show "other data" in header summary in entity detail component
Returns :
boolean
|
||||||
setEntityDetailShowOtherDataInSummary(value: boolean)
|
||||||
|
show "other data" in header summary in entity detail component
Parameters :
Returns :
void
|
| EntityDetailTruncateOtherDataInRecordsAt | ||||||
getEntityDetailTruncateOtherDataInRecordsAt()
|
||||||
|
lines of "other data" shown before ellipsis for records/matches in entity detail component
Returns :
number
|
||||||
setEntityDetailTruncateOtherDataInRecordsAt(value: number)
|
||||||
|
lines of "other data" shown before ellipsis for records/matches in entity detail component
Parameters :
Returns :
void
|
| EntityDetailHideGraphWhenZeroRelations | ||||||
getEntityDetailHideGraphWhenZeroRelations()
|
||||||
|
collapse graph section when no graphable relationships present in entity detail component
Returns :
boolean
|
||||||
setEntityDetailHideGraphWhenZeroRelations(value: boolean)
|
||||||
|
collapse graph section when no graphable relationships present in entity detail component
Parameters :
Returns :
void
|
| EntityDetailShowRecordIdWhenNative | ||||||
getEntityDetailShowRecordIdWhenNative()
|
||||||
|
show "record ids" in entity detail component when not auto-generated
Returns :
boolean
|
||||||
setEntityDetailShowRecordIdWhenNative(value: boolean)
|
||||||
|
show "record ids" in entity detail component when not auto-generated
Parameters :
Returns :
void
|
| EntityDetailShowTopEntityRecordIdsWhenSingular | ||||||
getEntityDetailShowTopEntityRecordIdsWhenSingular()
|
||||||
|
show top "record id" for entity composites when source record(s) is singular
Returns :
boolean
|
||||||
setEntityDetailShowTopEntityRecordIdsWhenSingular(value: boolean)
|
||||||
|
show top "record id" for entity composites when source record(s) is singular
Parameters :
Returns :
void
|
| GraphOpenInNewTab | ||||||
getGraphOpenInNewTab()
|
||||||
|
open a new tab when a user clicks a entity node in stand-alone graph
Returns :
boolean
|
||||||
setGraphOpenInNewTab(value: boolean)
|
||||||
|
open a new tab when a user clicks a entity node in stand-alone graph
Parameters :
Returns :
void
|
| GraphOpenInSidePanel | ||||||
getGraphOpenInSidePanel()
|
||||||
|
open a side panel inspector when a user clicks a entity node in stand-alone graph
Returns :
boolean
|
||||||
setGraphOpenInSidePanel(value: boolean)
|
||||||
|
open a side panel inspector when a user clicks a entity node in stand-alone graph
Parameters :
Returns :
void
|
| GraphDataSourceColors | ||||||
getGraphDataSourceColors()
|
||||||
|
map of datasource -> color to highlight nodes with when belonging to data source in stand-alone graph
Returns :
any
|
||||||
setGraphDataSourceColors(value: any)
|
||||||
|
map of datasource -> color to highlight nodes with when belonging to data source in stand-alone graph
Parameters :
Returns :
void
|
| GraphShowLinkLabels | ||||||
getGraphShowLinkLabels()
|
||||||
|
show match keys on relationship edges in graph
Returns :
boolean
|
||||||
setGraphShowLinkLabels(value: boolean)
|
||||||
|
show match keys on relationship edges in graph
Parameters :
Returns :
void
|
| GraphRememberStateOptions | ||||||
getGraphRememberStateOptions()
|
||||||
|
publish prefs change events on state change in graph component
Returns :
boolean
|
||||||
setGraphRememberStateOptions(value: boolean)
|
||||||
|
publish prefs change events on state change in graph component
Parameters :
Returns :
void
|
| GraphMaxDegreesOfSeparation | ||||||
getGraphMaxDegreesOfSeparation()
|
||||||
|
the value of "maxDegrees" parameter displayed in graph component
Returns :
number
|
||||||
setGraphMaxDegreesOfSeparation(value: number)
|
||||||
|
the value of "maxDegrees" parameter displayed in graph component
Parameters :
Returns :
void
|
| GraphMaxEntities | ||||||
getGraphMaxEntities()
|
||||||
|
maximum nuber of entitities displayed in graph component. useful for overflow scenarios
Returns :
number
|
||||||
setGraphMaxEntities(value: number)
|
||||||
|
maximum nuber of entitities displayed in graph component. useful for overflow scenarios
Parameters :
Returns :
void
|
| GraphBuildOut | ||||||
getGraphBuildOut()
|
||||||
|
the value of "buildOut" parameter displayed in graph component. sets distance of relationships shown. default is 1.
Returns :
number
|
||||||
setGraphBuildOut(value: number)
|
||||||
|
the value of "buildOut" parameter displayed in graph component. sets distance of relationships shown. default is 1.
Parameters :
Returns :
void
|
| prefsFromJSONString | ||||||
setprefsFromJSONString(value: string)
|
||||||
|
a JSON string value used for initializing preferences state from a JSON representation.
Parameters :
Returns :
void
|
<div *ngIf="showControls" class="sz-preferences">
<div class="prefs-ui-lists">
<!-- start search prefs -->
<div class="prefs-ui-column prefs-ui-column-search">
<!-- start search form prefs -->
<h4 class="title">Search</h4>
<ul class="prefs-ui-column-inner prefs-ui-column-inner-search">
<li *ngFor="let opt of searchFormOptions; let i = index" [attr.pref-key]="opt.name">
<input *ngIf="opt.inputType == 'checkbox'" [attr.id]="'c1-opts-search-form-'+ i" type="checkbox"
[checked]="boolPrefChecked('searchForm', opt.name)"
(change)="updateBoolPrefValue('searchForm', opt.name, $event)">
<input *ngIf="opt.inputType == 'number'" [attr.id]="'c1-opts-search-form-'+ i" type="number"
min="1" max="90" size="2"
[value]="prefValAsInt('searchForm', opt.name)"
(change)="updateIntPrefValue('searchForm', opt.name, $event)">
<label [attr.for]="'c1-opts-search-form-'+ i">{{ toSentenceCase(opt.name) | titlecase }}</label>
</li>
</ul>
<!-- end search form prefs -->
<!-- start search results prefs -->
<h4 class="title">Search Results</h4>
<ul class="prefs-ui-column-inner">
<li *ngFor="let opt of searchResultsOptions; let i = index" [attr.pref-key]="opt.name">
<input *ngIf="opt.inputType == 'checkbox'" [attr.id]="'c2-opts-search-results-'+ i" type="checkbox"
[checked]="boolPrefChecked('searchResults', opt.name)"
(change)="updateBoolPrefValue('searchResults', opt.name, $event)">
<input *ngIf="opt.inputType == 'number'" [attr.id]="'c2-opts-search-results-'+ i" type="number"
min="1" max="90" size="2"
[value]="prefValAsInt('searchResults', opt.name)"
(change)="updateIntPrefValue('searchResults', opt.name, $event)">
<label [attr.for]="'c2-opts-search-results-'+ i">{{ toSentenceCase(opt.name) | titlecase }}<!-- <span class="pref-key">({{opt.name}})</span> --></label>
</li>
</ul>
<!-- end search results prefs -->
</div>
<!-- end search prefs -->
<!-- start entity detail prefs -->
<div class="prefs-ui-column prefs-ui-column-entity-detail">
<h4 class="title">Entity Detail</h4>
<ul class="prefs-ui-column-inner">
<li *ngFor="let opt of entityDetailOptions; let i = index" [attr.pref-key]="opt.name">
<input *ngIf="opt.inputType == 'checkbox'" [attr.id]="'c3-opts-entityDetail-'+ i" type="checkbox"
[checked]="boolPrefChecked('entityDetail', opt.name)"
(change)="updateBoolPrefValue('entityDetail', opt.name, $event)">
<input *ngIf="opt.inputType == 'number'" [attr.id]="'c3-opts-entityDetail-'+ i" type="number"
min="1" max="90" size="2"
[value]="prefValAsInt('entityDetail', opt.name)"
(change)="updateIntPrefValue('entityDetail', opt.name, $event)">
<label [attr.for]="'c3-opts-entityDetail-'+ i">{{ toSentenceCase(opt.name) | titlecase }}</label>
</li>
</ul>
</div>
<!-- end entity detail prefs -->
<!-- start graph prefs -->
<div class="prefs-ui-column prefs-ui-column-graph">
<h4 class="title">Graph</h4>
<ul class="prefs-ui-column-inner">
<li *ngFor="let opt of graphOptions; let i = index" [attr.pref-key]="opt.name">
<input *ngIf="opt.inputType == 'checkbox'" [attr.id]="'c4-opts-graph-'+ i" type="checkbox"
[checked]="boolPrefChecked('graph', opt.name)"
(change)="updateBoolPrefValue('graph', opt.name, $event)">
<input *ngIf="opt.inputType == 'number'" [attr.id]="'c4-opts-graph-'+ i" type="number"
min="1" max="90" size="2"
[value]="prefValAsInt('graph', opt.name)"
(change)="updateIntPrefValue('graph', opt.name, $event)">
<label [attr.for]="'c4-opts-graph-'+ i">{{ toSentenceCase(opt.name) | titlecase }}</label>
</li>
</ul>
<!-- <h4 class="title">Datasource Colors</h4>
<sz-pref-dict [value]="GraphDataSourceColors" (dataChange)="GraphDataSourceColors = $event" valueType="color"></sz-pref-dict> -->
</div>
<!-- end graph prefs -->
</div>
</div>
sz-preferences.component.scss
:host {
display: block;
h4.title {
font-size: 1em;
font-weight: 600;
margin: 0 0 7px 0;
padding: 0 0 10px 0;
border-bottom: 1px inset #999;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
margin-left: 0;
margin-bottom: 5px;
font-size: .8em;
label {
margin-left: 10px;
}
input[type=number] {
width: 38px;
text-align: center;
}
input[type=checkbox] {
margin-left: 28px;
}
.pref-key {
font-weight: 600;
font-size: .6em;
text-emphasis: 1em;
display: block;
}
}
}
.prefs-ui-lists {
display: flex;
flex-wrap: wrap;
padding: 10px;
align-items: stretch;
justify-content: flex-start;
}
.prefs-ui-column {
display: inline-block;
padding: 10px 20px 2em 1em;
margin: 0 2em 0 0;
/* width: 200px; */
/* border-radius: 5px;
background-color: #efefef; */
border-radius: var(--sz-preferences-column-border-radius);
border-color: var(--sz-preferences-column-background-color);
.prefs-ui-column-inner {
display: inline-block;
&.prefs-ui-column-inner-search {
margin-bottom: 20px;
}
}
}
}