graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 3.32 kB
JavaScript
import{h}from"@stencil/core";import{TranslationService}from"../../services/translation.service";import{SubscriptionList}from"../../../../api/src/models/common";import{OntoTooltipPlacement}from"../onto-tooltip/models/onto-tooltip-placement";export class OntoToggleSwitch{constructor(){this.subscriptions=new SubscriptionList,this.checked=!1,this.toggle=()=>{this.checked=!this.checked,this.toggleChanged.emit({checked:this.checked,context:this.context})}}subscribeToLanguageChange(){this.tooltipTranslationKey&&this.subscriptions.add(TranslationService.onTranslate(this.tooltipTranslationKey,[],e=>{this.tooltipLabel=e}))}disconnectedCallback(){this.subscriptions.unsubscribeAll()}connectedCallback(){this.subscribeToLanguageChange()}render(){return h("section",{key:"3afb9d800ec06e6cac57d65eab4059bc7db42535"},this.labelKey&&h("label",{key:"90ae5f881975462da986f65fdce7b0548d9afa2d"},h("strong",{key:"ce8ca2e649681a874585835b35554dd9920f0aef"},h("translate-label",{key:"601a0371d31081ce5a84b824ddb43536c3e87405",labelKey:this.labelKey})," ")),h("button",{key:"90ea147e6e350461cdd74ccacf2dfe86cf875925",class:"toggle-switch",onClick:this.toggle,"tooltip-append-to":"parent","tooltip-content":this.tooltipLabel,"tooltip-placement":OntoTooltipPlacement.TOP},h("input",{key:"e7ae6a6c71a0fe9decebb559ed601998b6ee8bac",type:"checkbox",checked:this.checked}),h("label",{key:"02d328613d9e7c675e6531a1777ae7cf9a2d16b1"})))}static get is(){return"onto-toggle-switch"}static get originalStyleUrls(){return{$:["onto-toggle-switch.scss"]}}static get styleUrls(){return{$:["onto-toggle-switch.css"]}}static get properties(){return{checked:{type:"boolean",mutable:!0,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Determines whether the toggle switch is checked or not."},getter:!1,setter:!1,reflect:!1,attribute:"checked",defaultValue:"false"},labelKey:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!0,docs:{tags:[],text:"The key used for translating the label text, if supplied."},getter:!1,setter:!1,reflect:!1,attribute:"label-key"},tooltipTranslationKey:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!0,docs:{tags:[],text:"The translation label key for the tooltip message, if supplied."},getter:!1,setter:!1,reflect:!1,attribute:"tooltip-translation-key"},context:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!0,docs:{tags:[],text:"The context for the tooltip, if supplied. This is useful if you have multiple toggle switches, to know which one\nis being toggled."},getter:!1,setter:!1,reflect:!1,attribute:"context"}}}static get states(){return{tooltipLabel:{}}}static get events(){return[{method:"toggleChanged",name:"toggleChanged",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Event emitted when the toggle switch is clicked, carrying the new checked status."},complexType:{original:"ToggleEventPayload",resolved:"ToggleEventPayload",references:{ToggleEventPayload:{location:"import",path:"../../models/toggle-switch/toggle-event-payload",id:"src/models/toggle-switch/toggle-event-payload.ts::ToggleEventPayload",referenceLocation:"ToggleEventPayload"}}}}]}}