@internetarchive/collection-browser 2.10.1-alpha-webdev7090.5 → 2.10.1-alpha-webdev7090.7

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.
@@ -82,7 +82,7 @@ let SmartFacetButton = class SmartFacetButton extends LitElement {
82
82
  static get styles() {
83
83
  return css `
84
84
  .smart-facet-button {
85
- padding: 5px 10px;
85
+ padding: 5px 5px;
86
86
  border-radius: 5px;
87
87
  background: white;
88
88
  color: #2c2c2c;
@@ -98,6 +98,8 @@ let SmartFacetButton = class SmartFacetButton extends LitElement {
98
98
  }
99
99
 
100
100
  .smart-facet-button .unselect {
101
+ width: 10px;
102
+ filter: invert(1);
101
103
  }
102
104
 
103
105
  .smart-facet-button > svg {
@@ -1 +1 @@
1
- {"version":3,"file":"smart-facet-button.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { mediatypeConfig } from '../../mediatype/mediatype-config';\nimport type { SmartFacet, SmartFacetEvent } from './models';\n\nimport closeCircleDark from '../../assets/img/icons/close-circle-dark';\n\nfunction capitalize(str?: string): string | undefined {\n if (!str) return str;\n return str.charAt(0).toLocaleUpperCase() + str.slice(1);\n}\n\n@customElement('smart-facet-button')\nexport class SmartFacetButton extends LitElement {\n @property({ type: Object }) facetInfo?: SmartFacet;\n\n @property({ type: String }) labelPrefix?: string;\n\n @property({ type: Boolean }) selected = false;\n\n //\n // COMPONENT LIFECYCLE METHODS\n //\n\n render() {\n if (!this.facetInfo) return nothing;\n\n const isSingleFacet = this.facetInfo.facets.length === 1;\n const firstFacet = this.facetInfo.facets[0];\n\n const displayText = capitalize(\n (this.labelPrefix ? `${this.labelPrefix} ` : '') +\n (this.facetInfo.label ??\n firstFacet.displayText ??\n firstFacet.bucketKey),\n );\n if (!displayText) return nothing;\n\n const icon =\n isSingleFacet && firstFacet.facetType === 'mediatype'\n ? mediatypeConfig[firstFacet.bucketKey].icon\n : nothing;\n\n return html`\n <a\n class=\"smart-facet-button ${this.selected ? 'selected' : ''}\"\n href=${this.href}\n @click=${this.facetClicked}\n >\n ${icon} ${displayText}\n ${this.selected\n ? html`<span class=\"unselect\" style=\"margin-left: 5px;\"\n >${closeCircleDark}</span\n >`\n : nothing}\n </a>\n `;\n }\n\n //\n // OTHER METHODS\n //\n\n private get href(): string {\n const url = new URL(window.location.href);\n if (this.facetInfo) {\n for (const facet of this.facetInfo.facets) {\n url.searchParams.append(\n 'and[]',\n encodeURIComponent(`${facet.facetType}:\"${facet.bucketKey}\"`),\n );\n }\n }\n return url.toString();\n }\n\n private facetClicked(e: Event): void {\n e.preventDefault();\n if (!this.facetInfo) return;\n\n this.selected = !this.selected;\n\n this.dispatchEvent(\n new CustomEvent<SmartFacetEvent>('facetClick', {\n detail: {\n smartFacet: this.facetInfo,\n details: this.facetInfo.facets.map(f => ({\n facetType: f.facetType,\n bucket: {\n key: f.bucketKey,\n count: 0,\n state: this.selected ? 'selected' : 'none',\n },\n negative: false,\n })),\n },\n }),\n );\n }\n\n //\n // STYLES\n //\n\n static get styles(): CSSResultGroup {\n return css`\n .smart-facet-button {\n padding: 5px 10px;\n border-radius: 5px;\n background: white;\n color: #2c2c2c;\n border: 1px solid #194880;\n font-size: 1.4rem;\n font-family: inherit;\n text-decoration: none;\n }\n\n .smart-facet-button.selected {\n background: #194880;\n color: white;\n }\n\n .smart-facet-button .unselect {\n }\n\n .smart-facet-button > svg {\n width: 12px;\n filter: invert(0.16667);\n }\n\n .smart-facet-button.selected > svg {\n filter: invert(1);\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"smart-facet-button.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { mediatypeConfig } from '../../mediatype/mediatype-config';\nimport type { SmartFacet, SmartFacetEvent } from './models';\n\nimport closeCircleDark from '../../assets/img/icons/close-circle-dark';\n\nfunction capitalize(str?: string): string | undefined {\n if (!str) return str;\n return str.charAt(0).toLocaleUpperCase() + str.slice(1);\n}\n\n@customElement('smart-facet-button')\nexport class SmartFacetButton extends LitElement {\n @property({ type: Object }) facetInfo?: SmartFacet;\n\n @property({ type: String }) labelPrefix?: string;\n\n @property({ type: Boolean }) selected = false;\n\n //\n // COMPONENT LIFECYCLE METHODS\n //\n\n render() {\n if (!this.facetInfo) return nothing;\n\n const isSingleFacet = this.facetInfo.facets.length === 1;\n const firstFacet = this.facetInfo.facets[0];\n\n const displayText = capitalize(\n (this.labelPrefix ? `${this.labelPrefix} ` : '') +\n (this.facetInfo.label ??\n firstFacet.displayText ??\n firstFacet.bucketKey),\n );\n if (!displayText) return nothing;\n\n const icon =\n isSingleFacet && firstFacet.facetType === 'mediatype'\n ? mediatypeConfig[firstFacet.bucketKey].icon\n : nothing;\n\n return html`\n <a\n class=\"smart-facet-button ${this.selected ? 'selected' : ''}\"\n href=${this.href}\n @click=${this.facetClicked}\n >\n ${icon} ${displayText}\n ${this.selected\n ? html`<span class=\"unselect\" style=\"margin-left: 5px;\"\n >${closeCircleDark}</span\n >`\n : nothing}\n </a>\n `;\n }\n\n //\n // OTHER METHODS\n //\n\n private get href(): string {\n const url = new URL(window.location.href);\n if (this.facetInfo) {\n for (const facet of this.facetInfo.facets) {\n url.searchParams.append(\n 'and[]',\n encodeURIComponent(`${facet.facetType}:\"${facet.bucketKey}\"`),\n );\n }\n }\n return url.toString();\n }\n\n private facetClicked(e: Event): void {\n e.preventDefault();\n if (!this.facetInfo) return;\n\n this.selected = !this.selected;\n\n this.dispatchEvent(\n new CustomEvent<SmartFacetEvent>('facetClick', {\n detail: {\n smartFacet: this.facetInfo,\n details: this.facetInfo.facets.map(f => ({\n facetType: f.facetType,\n bucket: {\n key: f.bucketKey,\n count: 0,\n state: this.selected ? 'selected' : 'none',\n },\n negative: false,\n })),\n },\n }),\n );\n }\n\n //\n // STYLES\n //\n\n static get styles(): CSSResultGroup {\n return css`\n .smart-facet-button {\n padding: 5px 5px;\n border-radius: 5px;\n background: white;\n color: #2c2c2c;\n border: 1px solid #194880;\n font-size: 1.4rem;\n font-family: inherit;\n text-decoration: none;\n }\n\n .smart-facet-button.selected {\n background: #194880;\n color: white;\n }\n\n .smart-facet-button .unselect {\n width: 10px;\n filter: invert(1);\n }\n\n .smart-facet-button > svg {\n width: 12px;\n filter: invert(0.16667);\n }\n\n .smart-facet-button.selected > svg {\n filter: invert(1);\n }\n `;\n }\n}\n"]}
@@ -101,7 +101,7 @@ let SmartFacetDropdown = class SmartFacetDropdown extends LitElement {
101
101
  static get styles() {
102
102
  return css `
103
103
  .dropdown-container {
104
- padding: 5px 8px;
104
+ padding: 5px 5px;
105
105
  border-radius: 5px;
106
106
  background: white;
107
107
  color: #2c2c2c;
@@ -1 +1 @@
1
- {"version":3,"file":"smart-facet-dropdown.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { FacetRef, SmartFacet, SmartFacetEvent } from './models';\nimport { log } from '../../utils/log';\n\n@customElement('smart-facet-dropdown')\nexport class SmartFacetDropdown extends LitElement {\n @property({ type: Array }) facetInfo?: SmartFacet[];\n\n @property({ type: String }) labelPrefix?: string;\n\n @property({ type: Object }) activeFacetRef?: FacetRef;\n\n @query('ia-dropdown') dropdown?: IaDropdown;\n\n //\n // COMPONENT LIFECYCLE METHODS\n //\n\n render() {\n if (!this.facetInfo || !this.activeFacetRef) return nothing;\n if (this.facetInfo.length === 0) return nothing;\n\n const displayText =\n this.activeFacetRef.displayText ?? this.activeFacetRef.bucketKey;\n if (!displayText) return nothing;\n\n return html`\n <div class=\"dropdown-container\">\n <ia-dropdown\n class=\"dropdown\"\n displayCaret\n openViaButton\n closeOnSelect\n closeOnEscape\n closeOnBackdropClick\n includeSelectedOption\n .options=${this.dropdownOptions}\n .selectedOption=${this.activeDropdownOption}\n @optionSelected=${this.optionSelected}\n @click=${this.onDropdownClick}\n >\n <span class=\"dropdown-label\" slot=\"dropdown-label\"\n >${this.labelPrefix ?? nothing} ${displayText}</span\n >\n </ia-dropdown>\n </div>\n `;\n }\n\n //\n // OTHER METHODS\n //\n\n private get dropdownOptions(): optionInterface[] {\n return (\n this.facetInfo?.map(smartFacet => {\n const firstFacet = smartFacet.facets[0];\n return {\n id: firstFacet.bucketKey,\n label:\n smartFacet.label ?? firstFacet.displayText ?? firstFacet.bucketKey,\n };\n }) ?? []\n );\n }\n\n private get activeDropdownOption(): optionInterface | undefined {\n if (!this.activeFacetRef) return undefined;\n return this.dropdownOptions.find(\n opt => opt.id === this.activeFacetRef?.bucketKey,\n );\n }\n\n private optionSelected(e: CustomEvent<{ option: optionInterface }>): void {\n if (!this.facetInfo || !this.activeFacetRef) return;\n\n let selectedSmartFacet;\n for (const smartFacet of this.facetInfo) {\n const selectedRef = smartFacet.facets.find(\n b => b.bucketKey === e.detail.option.id,\n );\n if (selectedRef) {\n this.activeFacetRef = selectedRef;\n selectedSmartFacet = smartFacet;\n }\n }\n\n if (!selectedSmartFacet) return;\n\n this.dispatchEvent(\n new CustomEvent<SmartFacetEvent>('facetClick', {\n detail: {\n smartFacet: selectedSmartFacet,\n details: [\n {\n facetType: this.activeFacetRef.facetType,\n bucket: {\n key: this.activeFacetRef.bucketKey,\n count: 0,\n state: 'selected',\n },\n negative: false,\n },\n ],\n },\n }),\n );\n }\n\n private onDropdownClick(): void {\n log('smart dropdown: onDropdownClick', this);\n this.dispatchEvent(\n new CustomEvent<SmartFacetDropdown>('dropdownClick', { detail: this }),\n );\n }\n\n close(): void {\n if (this.dropdown) {\n this.dropdown.open = false;\n }\n }\n\n //\n // STYLES\n //\n\n static get styles(): CSSResultGroup {\n return css`\n .dropdown-container {\n padding: 5px 8px;\n border-radius: 5px;\n background: white;\n color: #2c2c2c;\n border: 1px solid #194880;\n font-size: 1.4rem;\n font-family: inherit;\n }\n\n .dropdown-label {\n font-size: 1.4rem;\n font-family: inherit;\n }\n\n .dropdown {\n --dropdownBorderWidth: 5px;\n --dropdownBorderColor: #194880;\n --dropdownBorderWidth: 1px;\n --dropdownBgColor: white;\n --dropdownTextColor: #2c2c2c;\n --dropdownHoverTextColor: #2c2c2c;\n --dropdownCaretColor: #2c2c2c;\n --dropdownWhiteSpace: nowrap;\n --caretWidth: 14px;\n --caretHeight: 14px;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"smart-facet-dropdown.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { FacetRef, SmartFacet, SmartFacetEvent } from './models';\nimport { log } from '../../utils/log';\n\n@customElement('smart-facet-dropdown')\nexport class SmartFacetDropdown extends LitElement {\n @property({ type: Array }) facetInfo?: SmartFacet[];\n\n @property({ type: String }) labelPrefix?: string;\n\n @property({ type: Object }) activeFacetRef?: FacetRef;\n\n @query('ia-dropdown') dropdown?: IaDropdown;\n\n //\n // COMPONENT LIFECYCLE METHODS\n //\n\n render() {\n if (!this.facetInfo || !this.activeFacetRef) return nothing;\n if (this.facetInfo.length === 0) return nothing;\n\n const displayText =\n this.activeFacetRef.displayText ?? this.activeFacetRef.bucketKey;\n if (!displayText) return nothing;\n\n return html`\n <div class=\"dropdown-container\">\n <ia-dropdown\n class=\"dropdown\"\n displayCaret\n openViaButton\n closeOnSelect\n closeOnEscape\n closeOnBackdropClick\n includeSelectedOption\n .options=${this.dropdownOptions}\n .selectedOption=${this.activeDropdownOption}\n @optionSelected=${this.optionSelected}\n @click=${this.onDropdownClick}\n >\n <span class=\"dropdown-label\" slot=\"dropdown-label\"\n >${this.labelPrefix ?? nothing} ${displayText}</span\n >\n </ia-dropdown>\n </div>\n `;\n }\n\n //\n // OTHER METHODS\n //\n\n private get dropdownOptions(): optionInterface[] {\n return (\n this.facetInfo?.map(smartFacet => {\n const firstFacet = smartFacet.facets[0];\n return {\n id: firstFacet.bucketKey,\n label:\n smartFacet.label ?? firstFacet.displayText ?? firstFacet.bucketKey,\n };\n }) ?? []\n );\n }\n\n private get activeDropdownOption(): optionInterface | undefined {\n if (!this.activeFacetRef) return undefined;\n return this.dropdownOptions.find(\n opt => opt.id === this.activeFacetRef?.bucketKey,\n );\n }\n\n private optionSelected(e: CustomEvent<{ option: optionInterface }>): void {\n if (!this.facetInfo || !this.activeFacetRef) return;\n\n let selectedSmartFacet;\n for (const smartFacet of this.facetInfo) {\n const selectedRef = smartFacet.facets.find(\n b => b.bucketKey === e.detail.option.id,\n );\n if (selectedRef) {\n this.activeFacetRef = selectedRef;\n selectedSmartFacet = smartFacet;\n }\n }\n\n if (!selectedSmartFacet) return;\n\n this.dispatchEvent(\n new CustomEvent<SmartFacetEvent>('facetClick', {\n detail: {\n smartFacet: selectedSmartFacet,\n details: [\n {\n facetType: this.activeFacetRef.facetType,\n bucket: {\n key: this.activeFacetRef.bucketKey,\n count: 0,\n state: 'selected',\n },\n negative: false,\n },\n ],\n },\n }),\n );\n }\n\n private onDropdownClick(): void {\n log('smart dropdown: onDropdownClick', this);\n this.dispatchEvent(\n new CustomEvent<SmartFacetDropdown>('dropdownClick', { detail: this }),\n );\n }\n\n close(): void {\n if (this.dropdown) {\n this.dropdown.open = false;\n }\n }\n\n //\n // STYLES\n //\n\n static get styles(): CSSResultGroup {\n return css`\n .dropdown-container {\n padding: 5px 5px;\n border-radius: 5px;\n background: white;\n color: #2c2c2c;\n border: 1px solid #194880;\n font-size: 1.4rem;\n font-family: inherit;\n }\n\n .dropdown-label {\n font-size: 1.4rem;\n font-family: inherit;\n }\n\n .dropdown {\n --dropdownBorderWidth: 5px;\n --dropdownBorderColor: #194880;\n --dropdownBorderWidth: 1px;\n --dropdownBgColor: white;\n --dropdownTextColor: #2c2c2c;\n --dropdownHoverTextColor: #2c2c2c;\n --dropdownCaretColor: #2c2c2c;\n --dropdownWhiteSpace: nowrap;\n --caretWidth: 14px;\n --caretHeight: 14px;\n }\n `;\n }\n}\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "The Internet Archive Collection Browser.",
4
4
  "license": "AGPL-3.0-only",
5
5
  "author": "Internet Archive",
6
- "version": "2.10.1-alpha-webdev7090.5",
6
+ "version": "2.10.1-alpha-webdev7090.7",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.js",
9
9
  "scripts": {
@@ -105,7 +105,7 @@ export class SmartFacetButton extends LitElement {
105
105
  static get styles(): CSSResultGroup {
106
106
  return css`
107
107
  .smart-facet-button {
108
- padding: 5px 10px;
108
+ padding: 5px 5px;
109
109
  border-radius: 5px;
110
110
  background: white;
111
111
  color: #2c2c2c;
@@ -121,6 +121,8 @@ export class SmartFacetButton extends LitElement {
121
121
  }
122
122
 
123
123
  .smart-facet-button .unselect {
124
+ width: 10px;
125
+ filter: invert(1);
124
126
  }
125
127
 
126
128
  .smart-facet-button > svg {
@@ -129,7 +129,7 @@ export class SmartFacetDropdown extends LitElement {
129
129
  static get styles(): CSSResultGroup {
130
130
  return css`
131
131
  .dropdown-container {
132
- padding: 5px 8px;
132
+ padding: 5px 5px;
133
133
  border-radius: 5px;
134
134
  background: white;
135
135
  color: #2c2c2c;